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:

    Selfhtml schrieb:

    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: