Media Queries funktionieren nicht in Tabelle - Flexbox

  • Hallo zusammen,


    ich teste gerade wie ich einen Stundenplan responsive gestalten kann und habe dazu die DIV's mit Flexbox gestaltet. Leider funktioniert der Befehl für die Media Queries nicht. Aber warum? Wie kann ich jedem zweiten Child einen farbigen Background geben.


    Den Code habe ich beigefügt.


  • Die Lösung findet man, wenn man nachliest, wie device-width definiert ist:

    Zitat von Selfhtml

    Das Merkmal device-width (Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z. B. Breite eines Bildschirms in Pixel.

    Testet man das auf einem großen Monitor, indem man das Browserfenster zusammen schiebt, ändert sich natürlich nicht die Breite des Bildschirms. Lösung, indem Du width statt device-width verwendest. Ich würde allerdings erwarten, dass es funktioniert, wenn man es real auf einem Smartphone testet.


    Zitat

    Wie kann ich jedem zweiten Child einen farbigen Background geben.

    Mit :nth-child(odd) bzw. :nth-child(even) kannst Du in CSS jedes zweite Element ansprechen.

  • PS: Man kann das auch mit einer Tabelle mit relativ geringem Aufwand responsiv machen:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!