24 min read
Basic Responsive Design
The viewport tag, fluid widths, flexible images and media queries — so the site works on phones, tablets and computers.
What Is Responsive Design?
The Four Ingredients
- The viewport meta tag in every page's head,
<meta name="viewport" content="width=device-width, initial-scale=1.0">— without it, phones pretend to be a wide screen and shrink everything. - Fluid widths — use max-width and percentages instead of large fixed widths.
- Flexible images —
img { max-width: 100%; height: auto; }so images never overflow their container. - Flexible layouts — flexbox with wrap and grid with auto-fill (you have already done this), plus media queries for anything else.
Media Queries
A media query from the tea room's style sheetCSS
/* Styles for every screen come first */.hero img { height: 320px;} /* Then changes for small screens */@media (max-width: 600px) { header { justify-content: center; } .hero img { height: 200px; }}A media query applies its rules only when a condition is true — here, when the browser window is 600px wide or less. The rules inside override the earlier ones on small screens.
What the browser shows
Try it: The preview is wider than 500px, so the sidebar sits beside the main text. Change 500px to 900px — now the query is true and the sidebar stacks underneath.
Mobile First
Two approaches
| Desktop first | Mobile first |
|---|---|
Write the wide layout, then fix small screens with max-width queries | Write the phone layout first, then add columns with min-width queries |
| Common when converting older sites | Recommended for new sites — most visitors use phones |
Testing Responsiveness
- Drag the browser window narrower and wider.
- Press F12, then the device icon, and choose a phone such as a Galaxy or iPhone.
- Check: no sideways scrolling, text readable without zooming, buttons big enough to tap, images fit.
Practice
Select the things that help a site work on phones.
Choose all that apply.
More lessons in CSS · Next: Finishing the Tea Room Site · Previous: Hover Effects and Transitions