Your site will be viewed on screens from tiny phones to huge monitors. Responsive design makes one layout adapt to all of them. The main tool is the media query.
The viewport meta tag
Responsive CSS only works if the HTML head has the viewport meta tag. Without it, phones pretend to be desktop-width and shrink everything. It belongs on every page.
<meta name="viewport" content="width=device-width, initial-scale=1">Media queries
A media query applies CSS only when a condition is true — usually a screen width. <code>@media (max-width: 600px)</code> means "on screens 600px and narrower".
<div class="row"><div class="col">A</div><div class="col">B</div></div>.row{display:flex;gap:12px}
.col{flex:1;background:#2563eb;color:#fff;padding:20px;text-align:center;border-radius:8px}
@media (max-width:600px){.row{flex-direction:column}}Mobile-first thinking
The modern approach is mobile-first: write the base styles for small screens, then use <code>min-width</code> media queries to add complexity for larger screens. It keeps CSS simpler and faster on phones.
- Base = desktop
- @media (max-width) shrinks down
- More overrides
- Base = mobile
- @media (min-width) builds up
- Cleaner, recommended
<!-- no viewport tag --><meta name="viewport" content="width=device-width, initial-scale=1">Forgetting the viewport meta tag, so media queries never trigger on phones and the page looks zoomed-out.
Pick a few sensible breakpoints (e.g. 600px, 900px, 1200px) and design mobile-first. Test by narrowing your browser window.
Make a two-column row that stacks into one column below 600px using a media query. Resize the preview to watch it switch.
1. What does @media (max-width:600px) target?
2. What must the HTML head include for responsive CSS?
3. Mobile-first means…
- The viewport meta tag is required for responsive CSS.
- Media queries apply CSS at certain screen widths.
- max-width targets narrower screens; min-width targets wider.
- Design mobile-first and build up.