Lesefortschritt:

Alternatives Website-Logo in der Mobilansicht anzeigen

17. Juli 2024 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 250 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

Vielleicht möchten Sie in der Desktop-Ansicht ein anderes Website-Logo zeigen als in der Mobilansicht? Zum Beispiel eines ohne Claim, weil dieser auf Mobilgeräten eh nicht gut lesbar ist? Nichts leichter als das.

Fügen Sie Ihrer Mediathek erst das alternative-Mobil-Logo hinzu, sofern Sie das nicht schon gemacht haben. Öffnen Sie nun das Logo und kopieren Sie den Bildlink.

Anschliessend wechseln Sie in das CSS-Stylesheet Ihrer Website (im Backend unter Design/Customizer/Zusätzliches CSS)  und fügen Sie den folgenden CSS-Block ein:

@media only screen and (max-width: 981px) {
  #logo {
    content: url("http://ihredomain.ch/wp-content/uploads/mobile_logo.png");
  }
}

Auf Zeile 3 fügen Sie anstelle des beispielhaften Dateipfads den Pfad zu Ihrem Mobillogo ein.

Der Code bewirkt, dass nun auf allen Anzeigen, welche maximal 980 Pixel breit sind, das Mobillogo angezeigt wird.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This