Media queries & responsive
Media queries let one HTML page and one stylesheet adapt to phones, laptops and wide monitors. The course starts with the viewport meta tag that makes mobile browsers use the device's real width. It then covers @media syntax, min-width and max-width, and how media query rules follow the normal cascade. It compares mobile-first and desktop-first, shows how to pick breakpoints from content instead of devices, and applies media queries to flexbox and positioning. It also covers orientation, dark mode and reduced motion, ending with a mobile-first navbar and card grid.
What you'll learn
- ✓Why the viewport meta tag is required for media queries on mobile
- ✓Writing @media rules with min-width, max-width and range syntax
- ✓Structuring stylesheets mobile-first or desktop-first
- ✓Choosing breakpoints by watching where content breaks
- ✓Changing flex-direction, display and position at breakpoints
- ✓Responding to orientation, dark mode and reduced-motion preferences
Why responsive design exists
A visitor might open your page on a phone in one hand, a laptop on a desk or a monitor twice as wide. Every CSS course so far assumed a reasonable amount of room: flexbox rows, positioned badges, centered cards. None asked the question responsive design exists for. What should happen when the room…
Read the full lesson free →Curriculum
7 lessonsWhy responsive design exists
Why one adaptive page replaced separate mobile sites, and why the viewport meta tag comes first.
@media syntax and min-width/max-width
How @media blocks work, how min-width and max-width differ, and why rule order still matters.
Mobile-first vs desktop-first
Compares overriding down with max-width against adding up with min-width, and why mobile-first is the common default.
Choosing breakpoints: content, not devices
Why device-named breakpoints are fragile and how to find breakpoints by resizing until content breaks.
Responsive flexbox and positioning
Uses media queries to flip flex-direction, toggle navigation visibility and change a sidebar's position by width.
Beyond width: orientation and user preferences
Covers orientation, prefers-color-scheme and prefers-reduced-motion, which use the same syntax and cascade as width queries.
Putting it together: a mobile-first navbar and card grid
Builds a mobile-first navbar and card grid that grows at 768px and follows the dark theme.