nicht angemeldet
Matthias Apsel
Matthias Scharwies
Henry
Gunnar Bittersmann
Auge
Henry
Rolf B
meltemi
Hallo,
ich brauche eure Hilfe. Folgendes Problem.
Meine Website ist responsive bis auf die Überschrift, wenn Sie zu viele Zeichen hat. An den Bildern kann man es am besten erkennen.
index.html
<body class="landing">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header" class="alt">
h1><a href="index.html">Wenn diese Überschrift zu lang ist wird sie auf mobilen Geräten abgeschnitten</a></h1>
....
</body>
</html>
<!-- Localized -->
die ccs datei ist leider zu groß deshalb hier zum Download:
https://www.mediafire.com/file/rj334usb5lzp1g8/main.css/file
Ich hoffe ihr könnt mir helfen.
Hallo dare,
ein Link zur Seite wäre sinnvoll. Dann kann man sich mit den Entwicklertools anschauen.
Bis demnächst
Matthias
kleinerwaffenschein.eu
verkleinern wär am besten denke ich
Servus!
verkleinern wär am besten denke ich
Ich gehe da mit @Henry der eher eine kürzere h2 bevorzugt. Auf einem Handy würde die Überschrift kleinerwaffenschein.eu auf 20em Breite sehr klein aussehen und nicht
Was Hältst Du von "kleiner Waffenschein?"
BTW: Dein HTML und CSS enthält viele Elemente, die nicht benötigt werden:
#banner h2 {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-moz-transition: -moz-transform .5s ease,opacity .5s ease;
-webkit-transition: -webkit-transform .5s ease,opacity .5s ease;
-ms-transition: -ms-transform .5s ease,opacity .5s ease;
transition: transform .5s ease,opacity .5s ease;
display: inline-block;
font-size: 1.75em;
opacity: 1;
padding: .35em 1em;
position: relative;
z-index: 1;
}
Das ist das gleiche wie:
#banner h2 {
transition: transform .5s ease,opacity .5s ease;
padding: .35em 1em;
}
Das div.inner im banner ist auch nicht nötig!
Herzliche Grüße
Matthias Scharwies
Hallo dare0,
verkleinern wär am besten denke ich
wie ich schon schrieb, besser keine lange Wörter. Aber du kannst natürlich ein wenig mit vh,vw,vmin, usw. und den Calc-Optionen experimentieren ob dir irgendein Wert dabei zusagt.
zb.
font-size: calc(2vh + 4vw);
Gruss
Henry
@@Henry
font-size: calc(2vh + 4vw);
Nein, so kann die Schrift unleserlich klein werden.
In die Berechnung gehört eine Angabe in em oder rem oder .px
Sowas wie bspw. calc(0.8rem + 4vw)
LLAP 🖖
Hallo
font-size: calc(2vh + 4vw);Nein, so kann die Schrift unleserlich klein werden.
In die Berechnung gehört eine Angabe in
emoderremoder.pxSowas wie bspw.
calc(0.8rem + 4vw)
Oder … oder es braucht, analog zu Breiten- und Höhenangaben, eine Eigenschaft min-font-size. 😉
font-size: calc(2vh + 4vw);
min-font-size: 0.8rem; /* * */
Tschö, Auge
* Nein, das gibt's „in echt“ nicht.
@@Auge
Oder … oder es braucht, analog zu Breiten- und Höhenangaben, eine Eigenschaft
min-font-size. 😉font-size: calc(2vh + 4vw); min-font-size: 0.8rem; /* * */Tschö, Auge
* Nein, das gibt's „in echt“ nicht.
Doch, aber anders:
font-size: max(calc(2vh + 4vw), 0.8rem);
Und bislang nur in WebKits und Chromia. ☞ MDN
LLAP 🖖
Hallo
Oder … oder es braucht, analog zu Breiten- und Höhenangaben, eine Eigenschaft
min-font-size. 😉font-size: calc(2vh + 4vw); min-font-size: 0.8rem; /* * */* Nein, das gibt's „in echt“ nicht.
Doch, aber anders:
Also nicht so, wie ich es notiert habe. Die Fußnote war ja dazu da, späteren Lesern ein „Mach' das nicht so!“ nachzurufen.
font-size: max(calc(2vh + 4vw), 0.8rem);Und bislang nur in WebKits und Chromia. ☞ MDN
Hmm, sieht zusammen mit min und clamp sehr interessant aus. Ich weiß ja nicht, welchen Versionsrhythmus MS mit Edge [1] einhalten will, aber wenn das auch eine neue Version alle paar Monate wird, wird bald nur noch Firefox als dazu unfähiger Browser übrig bleiben. 😕
Tschö, Auge
Weil ich es vor kurzem ansprach, ich habe den Chromium-basierten Edge immer noch nicht. ↩︎
@@Auge
Ja, clamp() ist hier wohl angesagt. Man will ja auch nicht, dass die Schrift auf großen Bildschirmen riesig groß wird.
Der aktuelle Edge 80 kann’s schon … ☞ Codepen
Ich weiß ja nicht, welchen Versionsrhythmus MS mit Edge [^1] einhalten will, aber wenn das auch eine neue Version alle paar Monate wird,
… wohl nicht das Problem des Versionsrhythmus von Edge, sondern des Auslieferns über Windows.
wird bald nur noch Firefox als dazu unfähiger Browser übrig bleiben. 😕
74.0b2 (Developer Edition) macht’s noch nicht.
LLAP 🖖
Wenn ich den Code hinzufüge klappt es leider immer noch nicht 😕
Hallo dare,
was soll denn passieren, wenn die Überschrift so lang wird? Verkleinern, umbrechen oder was genau?
Deshalb nimmt man möglichst keine extem langen Wörter, wirds zu klein ist es schwer zu lesen, wird es umgebrochen meist auch nicht schön, bleibt es lang horizontale scrollen, also alles nicht schön, daher vermeide lange Wörter.
Gruss
Henry
Hallo dare,
vielleicht hilft manuelle Silbentrennung und der Einsatz von ­
Rolf
Hallo,
der Einsatz von ­
verhackstückt das so getrennte Wort auch bei Google.
Das wäre also ein ganz schlechter Rat, vor allem, da es sich um eine Überschrift 1. Ordnung handelt.
Hallo meltemi,
der Einsatz von ­
verhackstückt das so getrennte Wort auch bei Google.
Das wäre also ein ganz schlechter Rat, vor allem, da es sich um eine Überschrift 1. Ordnung handelt.
Aha. Kannst du das auch belegen?
Bis demnächst
Matthias
Hallo Matthias,
der Einsatz von ­
verhackstückt das so getrennte Wort auch bei Google.
Das wäre also ein ganz schlechter Rat, vor allem, da es sich um eine Überschrift 1. Ordnung handelt.
Aha. Kannst du das auch belegen?
Ich hab' das mal getestet, ist allerdings schon eine Weile her. Nur selber testen macht schlau.
Einen Google-Hilfetext, den Du schwarz auf weiß nachhause tragen könntest, gibt es meines Wissens nicht.
Im Zweifelsfall teste das selbst, kostet doch nur ein bißchen Zeit. Suche bei Google nach einem verhackstückten Wort auf einer neu angelegten Seite, sobald indexiert. Für den Test darf das Wort natürlich kein einziges Mal ohne bedingtes Trennzeichen vorkommen, weder im Titel-Element noch in Überschriften noch im Text noch in Bild-Dateinamen noch in alt-Attributen. Hab' ich was vergessen? Das Wort ohne bedingtes Trennzeichen darf auch in keinem eingehenden Link zur Test-Seite enthalten sein ...
P.S. Vor zwei Monaten meldete jemand, der seine Seite mit bedingten Trennzeichen vollgepflastert hatte, im Google-Webmasterforum, daß im Google "Search Console"-"Live-Test" im HTML-Bereich statt der ­ lauter rote Punkte angezeigt werden.