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

Marius Marzian • 16. Mai 2021 • 3 Min. Lesezeit

Bildschirmfoto 2021 05 16 Um 12.49.38 1024x467 1

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

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-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.

Wann macht ein erzwungenes 2-Spalten-Layout Sinn?

Produktvergleiche & Listen

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.

Bild + Text Kombinationen

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.

Einschränkungen beachten

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.