Trick # 455 | Dieser Beitrag beinhaltet 333 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.
Bei der Gestaltung der Website, kann es leicht passieren, dass die Überschriften und Titel in der Mobilansicht zu gross geraten. Besonders wenn die Mobilanzeigen die Schriftart-Grösse gleich ausfällt wie in der Desktop-Ansicht, sind mehrstöckige Titel und unschöne Umbrüche die Folge. Lässt sich ganz einfach und global beheben.
Um die Titel und Überschriften <h1> bis <h6> in der Mobilansicht global festzulegen, benötigen Sie den folgenden CSS-Block. Er greift nur bei Anzeigen bis maximal 767 Pixel und wirkt darum ausschliesslich auf Mobilanzeigen, jedoch nicht auf dem Desktop-Monitor.
Fügen Sie den Block in das CSS-Stylesheet Ihrer Website (im Backend unter Design/Customizer/Zusätzliches CSS) ein:
@media screen and (max-width: 767px) {
.et_pb_post h1 {
font-size: 35px!important;
}
.et_pb_post h2 {
font-size: 30px!important;
}
.et_pb_post h3 {
font-size: 25px!important;
}
.et_pb_post h4 {
font-size: 22px!important;
}
}Die Schriftartgrössen können Sie natürlich selber festlegen. Im Code fehlen die weniger häufig genutzten Titelgrössen <h5> und <h6>. Falls Sie diese Überschriften verwenden, ergänzen Sie den Code einfach nach demselben Muster.
Wie Sie die Titel und Überschriften generell stylen können, erklären wir im Beitrag «Titel und Überschriften global stylen».
Werbung
Werbung
