Standardmäßig stapelt Divi auf mobilen Geräten nebeneinander liegende Spalten untereinander. Manchmal möchtest du jedoch, dass zwei Spalten auch auf dem Smartphone nebeneinander bleiben – etwa für Logos, Icons oder kurze Inhalte. Das lässt sich mit einer kleinen CSS-Anpassung erreichen.
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-colein - 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.
Verwandte Artikel
Wann macht ein erzwungenes 2-Spalten-Layout Sinn?
Zwei nebeneinander liegende Produkt- oder Feature-Karten sind auf Mobile oft besser lesbar als eine einzige breite Karte. Das 2-Spalten-Layout hält die Inhalte kompakt und scanbar.
Bei kleinen Vorschaubildern neben kurzem Text (z.B. Team-Profile oder Referenzen) verhindert das 2-Spalten-Layout unästhetisches Strecken auf großen Smartphone-Screens.
Auf sehr kleinen Geräten (320–360 px) kann selbst ein erzwungenes 2-Spalten-Layout zu eng werden. Teste immer auf echten Geräten oder im Browser-DevTool unter „Responsive Design" mit verschiedenen Viewports.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.