CodeAgeBy Sitezack
Fortgeschrittenes CSS für Macher 🎨Modernes, responsives Layout0 XP
Kapitel-Fortschritt0/5

Lektion 4 von 5

Media Queries: sich an den Bildschirm anpassen

Eine Media Query wendet CSS je nach Bildschirmgröße an: das Herzstück von Responsive Design.

@media (max-width: 600px) { … } gilt nur unter 600px Breite — ideal, um das Layout auf dem Handy umzustellen.

@media (max-width: 600px) {
  .menu { flex-direction: column; }
}

🎯 Dein Ziel

Das Menü .menu ist bereits flex. Füge im <style> eine Media Query @media (max-width: 600px) hinzu, die mindestens eine Regel ändert (z. B. .menu auf flex-direction: column).

PRO-Lektion

Dieses fortgeschrittene Kapitel gehört zu CodeAge PRO. Schalte es frei, um dein Abenteuer fortzusetzen.

PRO entdecken