CSS Responsive Design
Flex Responsive and Grid Responsive showed layout tricks at breakpoints. Responsive Design is the bigger picture: one site that stays readable on phones, tablets, and wide monitors — without maintaining two HTML copies. This lesson sets habits; Media Queries, breakpoints, and responsive images deepen the craft next.
A responsive design toolkit
📊 Responsive design at a glance
| Piece | Everyday job |
|---|---|
| Viewport meta | Tells mobile browsers to use device width, not a fake desktop column |
| Fluid container | width: 100% + max-width + side padding — readable line length |
Relative units (rem, %, em) |
Typography and spacing that scale with settings and context |
| Flexible images | max-width: 100% so media does not overflow narrow screens |
| One HTML tree | Same landmarks and links; CSS carries layout shifts |
| Media queries (next lesson) | Apply rule changes when the viewport matches |
Fixed-width pages that zoom or scroll sideways on phones frustrate users. Responsive design accepts any width and adjusts spacing, columns, and type calmly — using the Flex and Grid patterns you already practiced when layouts need to reflow.
Viewport meta — mobile browsers need a hint
Without <meta name="viewport" content="width=device-width, initial-scale=1">, many phones render a desktop-width canvas and shrink it. Add this once in the document head (HTML), then style with CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs desktop-first
Mobile-first writes base styles for narrow screens, then adds min-width media queries to enhance on larger viewports. Desktop-first starts wide and uses max-width queries to tighten — like Flex Responsive and Grid Responsive did. Either works if you change one layer at a time; pick one habit per project and stay consistent.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* Media Queries lesson adds min-width rules here */
Fluid centered container
Pair full width with a max-width cap and horizontal padding so content never touches the screen edge. This pattern works before you choose Flex or Grid for columns.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Relative units for type and spacing
rem ties sizes to the root font size — good for headings and gaps. % fits widths inside a parent. Avoid hard-coding every pixel when a relative scale keeps the page calm across zoom and device settings.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Flexible images and media
Bitmaps wider than the viewport cause horizontal scroll. A simple guard: block display and max-width: 100% with height: auto so aspect ratio stays honest.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
A calm responsive habit
One HTML tree. Viewport meta in place. Fluid container + relative units first. Reach for Flex or Grid responsive patterns when columns must reflow — not a second “mobile-only” site. Document your breakpoint plan; the Media Queries lesson names the syntax.
Try it yourself
- Confirm viewport meta on a sample page.
- Wrap content in a fluid container with
max-widthand side padding. - Set body copy in
remand test browser zoom. - Add the flexible image rule to a gallery page.
- List one layout that still needs a media query — save it for the next lesson.
Common mistakes
- Fixed pixel widths on every wrapper — no room to breathe on small screens
- A separate m.example.com site instead of responsive CSS on one tree
- Forgetting viewport meta and wondering why mobile looks “zoomed out”
- Huge images without
max-width: 100%— sideways scroll - Assuming this intro replaces Media Queries, breakpoints, and responsive images lessons
Summary
- Responsive design adapts one HTML tree across viewport sizes
- Viewport meta + fluid containers + relative units are the foundation
- Mobile-first and desktop-first are starting habits; media queries apply the shifts
- Flex and Grid responsive lessons are tools inside this mindset
- Next: Media Queries — syntax and calm breakpoint habits
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top