Die Karte bricht in der Seitenleiste um, obwohl der Bildschirm breit ist: Warum Media Queries hier versagen und Container Queries die Lösung sind

Das Symptom kennt jeder, der Websites pflegt: Eine Teaser-Karte mit Bild links und Text rechts sieht im dreispaltigen Raster gut aus. Dieselbe Karte in der Seitenleiste eines Blogbeitrags quetscht das Bild auf Briefmarkengröße und bricht den Text in Einwortzeilen um, obwohl der Bildschirm 1.920 Pixel breit ist. Die Ursache ist fast immer dieselbe, und Smashing Magazine hat sie am 16. September 2026 auf den Punkt gebracht: Wir behandeln Container Queries wie Media Queries oder nutzen sie gar nicht, obwohl sie seit Jahren in allen Browsern verfügbar sind.

Die Ursache: Media Queries fragen den Bildschirm, nicht den Platz

Eine Media Query wie @media (min-width: 1024px) stellt dem Browser genau eine Frage: Wie breit ist das Fenster? Ist es breit genug, bekommt die Karte ihr zweispaltiges Layout, egal, ob sie in einer 900 Pixel breiten Hauptspalte oder in einer 300 Pixel schmalen Seitenleiste steht. Der Autor des Beitrags zitiert Kevin Powell, der es bei der SmashingConf Amsterdam 2026 so formulierte: Media Queries sind nicht dumm im Konzept, sondern darin, dass sie sehr wenig wissen. Sie kennen das Fenster, nicht die Umgebung des Elements.

Solange eine Komponente nur an einer Stelle vorkommt, fällt das nicht auf. Sobald dieselbe Karte, dasselbe Formular oder derselbe Teaser an drei Stellen mit unterschiedlicher Breite steht, beginnt das Flickwerk: Zusatzklassen wie .card--sidebar, Ausnahmen für einzelne Seiten, Media Queries, die an Layoutbreiten angepasst werden, die sich beim nächsten Redesign ändern.

Die Lösung: Container Queries fragen nach innen

Eine Container Query stellt eine andere Frage: Wie viel Platz habe ich an dieser Stelle gerade? Dafür braucht es zwei Schritte. Das umgebende Element wird zum Container erklärt, die Komponente reagiert auf dessen Breite:

.card-wrapper {
  container-name: card;
  container-type: inline-size;
}
@container card (min-width: 480px) {
  .card { display: flex; }
}

Die Karte klappt jetzt in die zweispaltige Ansicht, sobald ihr Behälter mindestens 480 Pixel breit ist. In der Hauptspalte ist das der Fall, in der Seitenleiste nicht, und beides funktioniert auf demselben Bildschirm ohne eine einzige Zusatzklasse. Laut Smashing Magazine liegt der häufigste Fehler darin, Container Queries mit denselben Schwellenwerten und derselben Denkweise wie Media Queries zu schreiben, also weiterhin für „Desktop“ und „Mobil“ statt für den Platz, den die Komponente tatsächlich bekommt.

Schritt für Schritt umstellen

1. Komponenten finden, die mehrfach vorkommen: Karten, Teaser, Formulare, Produktkacheln, Autorenboxen. Alles, was einmal im Raster und einmal in einer schmalen Spalte steht.
2. Den Behälter bestimmen: Das Element, dessen Breite sich ändert, meist ein Wrapper um die Komponente oder die Rasterzelle. Es bekommt container-type: inline-size. Ein Name ist optional, hilft aber bei verschachtelten Containern.
3. Schwellen nach dem Inhalt wählen: Ab welcher Breite passen Bild und Text nebeneinander, ohne dass der Text unter drei Wörter pro Zeile fällt? Diese Breite ist die Schwelle, nicht irgendein Gerätemaß.
4. Media Queries für das Seitenlayout behalten: Ob die Seite ein-, zwei- oder dreispaltig ist, bleibt eine Frage des Fensters. Media Queries sind dafür weiterhin richtig. Container Queries übernehmen die Ebene darunter.
5. Prüfen: Die Komponente in jeden Kontext setzen, in dem sie vorkommt, und das Fenster durchziehen. Bricht nichts mehr, sind die Zusatzklassen überflüssig und können weg.

Was das für WordPress, Divi und Elementor heißt

Page-Builder arbeiten mit Breakpoints, die sich auf das Fenster beziehen. Wer dort eine Komponente an mehreren Stellen einsetzt, landet bei denselben Ausnahmen. Der Ausweg ist eigenes CSS für die betroffene Komponente, das im Builder als benutzerdefiniertes CSS oder im Child-Theme liegt. Im Block-Editor gilt dasselbe für Vorlagen-Teile, die in Hauptspalte und Seitenleiste auftauchen. Ich setze Container Queries seit einiger Zeit in Kundenprojekten ein, und der spürbarste Effekt ist nicht die Technik, sondern die Ruhe: weniger Ausnahmen, weniger Rückfragen nach dem Motto „auf meinem Monitor sieht es anders aus“. Was das in der Praxis bedeutet, zeige ich in meinen Design-Beispielen und in meiner Arbeit im Webdesign.

Quellen

• Smashing Magazine: Stop Treating CSS Container Queries Like Traditional Media Queries

Kurz beantwortet

Warum sieht meine Komponente in der Seitenleiste anders aus als im Raster?

Weil Media Queries nur die Fensterbreite kennen. Auf einem breiten Bildschirm bekommt die Komponente ihr großes Layout, auch wenn ihr Behälter schmal ist.

Ersetzen Container Queries die Media Queries?

Nein. Media Queries steuern weiterhin das Seitenlayout, Container Queries die Komponenten darin. Beide zusammen ergeben ein Layout, das an jeder Stelle passt.

Kann ich Container Queries in Divi oder Elementor nutzen?

Ja, über benutzerdefiniertes CSS oder ein Child-Theme. Die eingebauten Breakpoints der Builder beziehen sich auf das Fenster und können das nicht ersetzen.

Sie möchten das Thema für Ihr Unternehmen umsetzen? Mehr zu unseren Leistungen: Webdesign, SEO, GEO & AEO.