Responsive design
Let the layout follow the available space.
Begin with the narrow layout
A single column is a useful starting point. Add complexity when the content has enough room. Include a viewport meta tag so mobile browsers use the device width for the layout viewport.
Use a media query
@media (min-width: 600px) applies its rules when the viewport is at least 600 CSS pixels wide. Choose breakpoints based on where the content needs a different layout.
Test between the extremes
A page must work at the widths between phone and desktop too. Flexible widths, wrapping, and readable line lengths reduce the need for many breakpoints.
Try the example
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; padding: 24px; font-family: sans-serif; background: #f7f8f2; }
main { display: grid; gap: 16px; max-width: 900px; margin: auto; }
section { background: #d4ef78; padding: 24px; }
@media (min-width: 600px) { main { grid-template-columns: 1fr 1fr; } }
</style>
<h1>Space changes things.</h1>
<main>
<section><h2>One idea</h2><p>Readable on a small screen.</p></section>
<section><h2>Another idea</h2><p>Side by side when there is room.</p></section>
</main>Enable JavaScript to edit and run the example in the playground.
Your turn
Switch the preview between narrow and wide. Change the breakpoint from 600px to 400px and compare.
Check your understanding
When does min-width: 600px match?
- Below 600 CSS pixels
- At 600 CSS pixels and above
- Only at exactly 600 CSS pixels
Show answer and explanation
At 600 CSS pixels and above. min-width is an inclusive lower bound.