Divi-Theme: Contentbreite für mobile Anzeigen anpassen

26. Dezember 2021 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 2 Minuten.

Der Inhalt von Websites, welche mit dem Divi-Theme erstellt werden wird auf mobilen Geräten mit einer maximalen Breite von 80 Prozent der Anzeigenbreite dargestellt. Mit CSS-Code können Sie diesen Wert jedoch ganz einfach verändern.

Fügen Sie folgenden Code in das CSS-Stylesheet Ihrer Website ein. Sie finden es unter Design/Customizer/Zusätzliches CSS:

@media only screen and (max-width: 980px) {
  #top-header > .container,
  #main-header > .container,
  #et_search_outer > .container,
  body.single #main-content > .container,
  body.page:not(.et-tb-has-template) div.et_pb_row,
  body.page.et-tb-has-template .et-l--post div.et_pb_row,
  body.single-project div.et_pb_row,
  body.single-project div.et_pb_row.et_pb_row_fullwidth {
     width: 90% !important; 
   }
}
  • Dieser Code wirkt bei einer Anzeigenbreite von maximal 980 Pixel (Zeile 1) – dies betrifft also vorab Tablet und Mobiltelefonansichten. Natürlich können Sie auch eine andere Breite als Breakpoint definieren.
  • Anschliessend folgt eine Menge CSS-IDs und -Klassen. Diese sollten Sie unverändert übernehmen.
  • Interessant wird’s auf Zeile 10: Dort werden mit obigem Code 90 Prozent als Contentbreite definiert. Diesen Wert können Sie nach eigenem Gusto anpassen.

Das war’s auch schon. Gar nicht schwierig. Oder?

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