Wie erzwinge ich 2 Spalten auf Mobilgeräten in Divi?

Füge Custom CSS hinzu: @media (max-width: 767px) { .dein-row .et_pb_column { width: 50% !important; } } Die Spalten werden dann auch auf dem Smartphone nebeneinander angezeigt.

2 Spalten in Divi auf mobilem Gerät erzwingen

Autor

Marius Marzian

Datum 16. Mai 2021

Kategorie SEO

Bildschirmfoto 2021 05 16 Um 12.49.38 1024x467 1

CSS-Code für 2 Spalten auf Mobile

Füge folgenden Code in Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS oder in das Zusätzliche CSS-Feld des jeweiligen Abschnitts ein:

@media (max-width: 767px) {
  .force-two-col .et_pb_column {
    width: 50% !important;
    float: left !important;
  }
}

CSS-Klasse auf den Row-Bereich anwenden

Öffne den Divi Builder und klicke auf das Row-Element (die Zeile mit deinen zwei Spalten)
Gehe zu „Erweitert“ → „CSS-ID & Klassen“
Trage im Feld „CSS-Klasse“ den Wert force-two-col ein
Speichere die Seite

Alternative: Divi Responsive Settings

In neueren Divi-Versionen kannst du in den Row-Einstellungen unter „Design“ → „Breite“ für jedes Breakpoint (Desktop, Tablet, Mobil) eigene Spaltenbreiten festlegen – ohne CSS. Aktiviere dazu das Responsive-Icon neben der Breiteneinstellung.

Tipp

Verwende diese Technik sparsam – sehr schmale Spalten auf kleinen Bildschirmen können die Lesbarkeit stark einschränken. Teste immer auf echten Mobilgeräten oder im Chrome DevTools Device Emulator.