Lesson 9 of 12
Structured learning draftDesign responsive pages around content
Responsive design is an approach, not a device list. Begin with flexible content, then introduce a media or container query only where the composition stops working. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Start with a fluid, narrow-screen layout.
- Add breakpoints where content needs them.
- Verify reflow and zoom without horizontal scrolling.
Design responsive pages around content
Design responsive pages around content: viewport to media query to reflow.
Start with a fluid, narrow-screen layout.
Add breakpoints where content needs them.
Verify reflow and zoom without horizontal scrolling.
main { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.hero { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
.hero { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}Test content at narrow and wide widths, 200% text size and 400% browser zoom. WCAG reflow evaluation focuses on avoiding two-dimensional scrolling at an equivalent 320 CSS-pixel width except where a two-dimensional layout is essential.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Choosing breakpoints from popular phone models.
- Disabling zoom in viewport metadata.
- Testing only portrait phone and desktop widths.
Practice activity
Apply the lesson
Make the portfolio reflow from 320px through 1280px, then document the exact content failure that justifies each breakpoint. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
When should a new breakpoint normally be introduced?
Lesson summary
- Fluid design comes before media queries.
- Breakpoints respond to content.
- Zoom and text resizing are required test conditions.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note