"Your page will be viewed on phones, tablets, and giant monitors. Responsive design means it looks great on all of them — automatically."
Learning Objectives
By the end of this module, you will be able to:
- Explain what responsive design is
- Use Flexbox and Grid to lay out a page
- Write a media query
- Choose flexible units over fixed pixels
1. What "Responsive" Means
A responsive page adapts its layout to the screen it's on — one column on a phone, several on a desktop — without a separate site for each device.
Key idea: Design mobile-first: style the small-screen layout first (it's simpler), then add rules for bigger screens. It keeps your CSS cleaner and your phone experience solid.
Why mobile-first? Two reasons. First, phones are how most people browse today, so getting the small screen right matters most. Second, it's easier to add complexity for big screens than to strip it away for small ones — starting simple keeps your CSS clean. You write the base styles for a narrow screen, then layer on min-width media queries that enhance the layout as more space becomes available.
Explain like I'm new: Responsive design is like water — pour it into a tall glass or a wide bowl and it fills the shape. Your content stays the same; only the container (the screen) changes, and your CSS lets the content flow to fit.
2. Flexbox vs. Grid
Two modern layout tools do most of the work:
| Tool | Best for | Think of it as… |
|---|---|---|
| Flexbox | One direction — a row or a column | Arranging items on a shelf |
| Grid | Two directions — rows and columns | A spreadsheet or gallery |
[object Object], { ,[object Object],: flex; ,[object Object],: ,[object Object],; } ,[object Object],
,[object Object], { ,[object Object],: grid; ,[object Object],: ,[object Object],(,[object Object],, ,[object Object],fr); } ,[object Object],Notice how little code that is. display: flex turns a container into a flexible row; display: grid with grid-template-columns lays out a tidy grid. Both handle spacing, wrapping, and alignment for you — the kind of thing that used to take fiddly hacks now takes one or two lines.
Real-world use case: The three-column card layout on a shop's homepage that becomes a single scrolling column on your phone? That's almost always CSS Grid plus one media query. You've seen this pattern on nearly every site you visit.
3. Media Queries
A media query applies styles only at certain screen sizes — the heart of responsive design:
[object Object],
,[object Object], (,[object Object],: ,[object Object],) {
,[object Object], { ,[object Object],: ,[object Object],(,[object Object],, ,[object Object],fr); }
}Also add this once in your HTML <head> so mobile browsers behave:
[object Object],A quick note on the two directions: min-width queries say "apply this from this width upward" (perfect for mobile-first), while max-width queries say "apply this up to this width" (handy for phone-only tweaks). In the gallery example above, we start with the base layout and jump to four columns once the screen is at least 768px wide.
Beginner mistake: Forgetting the viewport <meta> tag. Without it, phones pretend to be desktop-width and your careful responsive layout looks tiny and zoomed-out. It's a one-line fix that catches many beginners.
4. Flexible Units
Prefer units that flex over fixed pixels:
- % — relative to the parent's size
- rem — relative to the base font size (great for spacing and text)
- fr — a "fraction" of available space (Grid)
Why avoid fixed pixels for everything? Because a width set to 600px stays 600px even on a 375px-wide phone, causing sideways scrolling. Percentages and fr units share out the available space, so your layout bends to fit. And rem for text means users who set a larger default font size (for readability) get everything scaled up consistently.
Common mistake: Setting fixed heights and widths in px on containers, then wondering why content overflows on small screens. Reach for flexible units (%, rem, fr, and max-width) and let the browser do the resizing math for you.
Practice task: Take a 3-card layout and make it a Grid of 3 columns on desktop, then add a media query so it becomes 1 column on screens under 600px. Resize your browser to watch it snap between layouts.
Key Takeaway: Responsive design adapts one page to every screen. Build mobile-first, lay out with Flexbox (one direction) and Grid (two directions), adjust at breakpoints using media queries, remember the viewport meta tag, and favor flexible units (%, rem, fr) over fixed pixels.
Further Learning
- Responsive design — MDN
- Learn Responsive Design — web.dev
- A complete guide to Flexbox & Grid — MDN CSS layout
Adapted from Microsoft's Web Dev for Beginners (MIT License).