Ab und an passt die Grösse des Website-Logos im Divi-Theme in der Desktop-Ansicht gut – auf Mobilgeräten jedoch kommt es zu gross – manchmal auch zu klein – daher. Mit einem einfachen Trick können Sie die Abmessungen aber festlegen. Wir zeigen Ihnen wie das geht.
Alles, was Sie benötigen ist ein wenig CSS-Code. Wir zeigen Ihnen zwei unterschiedliche Codes – je nachdem, wie Sie Ihr Logo anzeigen möchten.
Mobil-Logogrösse im zentrierten Header (Centered Header) anpassen
Wenn Ihr Logo auf der Website zentriert stehen soll, benötigen Sie folgenden Code, den Sie in das CSS-Stylesheet Ihrer Website unter Design/Customizer/Zusätzliches CSS einfügen:
@media only screen and (max-width:980px) {
.et_header_style_centered #logo,
.et_header_style_centered .logo_container {
height: 100px !important;
max-height: 100px !important;
}
}Der Code wirkt auf allen Mobiltelefon- und Tablet-Anzeigen. Die Logohöhe beträgt in diesem Beispiel 100 Pixel. Diesen Wert können Sie auf den Zeilen 4 und 5 anpassen.
Mobil-Logogrösse im zentrierten Inline-Header (Centered Inline Logo Header) anpassen
Für das Format «Centered Inline Logo» können Sie die Grösse des Logos auf dem Handy und Tablet mit dem folgenden CSS ändern. Auch diesen fügen Sie unter Design/Customizer/Zusätzliches CSS ein:
@media only screen and (max-width:980px) {
.et_header_style_split #logo,
.et_header_style_split .logo_container {
height: 100px !important;
max-height: 100px !important;
}
}Wie im ersten Beispiel greift auch dieser Code bis zu einer maximalen Anzeigebreite von 980 Pixel und umfasst damit Mobiltelefon- und Tablet-Anzeigen. Auf den Zeilen 4 und 5 sind 100 Pixel Logobreite definiert – diese Werte können Sie natürlich anpassen.
Recht einfach. Oder?
Werbung
Werbung
