Lesson 4 of 5
Media queries: adapt to the screen
A media query applies CSS depending on the screen size: it is the heart of responsive design.
@media (max-width: 600px) { … } only applies below 600px wide — perfect to rearrange the layout on mobile.
@media (max-width: 600px) {
.menu { flex-direction: column; }
}🎯 Your goal
The .menu is already flex. In the <style>, add a media query @media (max-width: 600px) that changes at least one rule (e.g. set .menu to flex-direction: column).
PRO lesson
This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.
Discover PRO →