People visit websites on every kind of device — a phone on the bus, a tablet on the couch, a wide monitor at a desk. A layout that looks great on a big screen can turn into a cramped, unusable mess on a phone if you never plan for it. Responsive design is the practice of building one website that adapts and looks good on all of them.
This is the last piece of CSS fundamentals, and it pulls everything together. You’ve learned to style elements and lay them out; now you’ll make those layouts flexible enough to fit any screen. The main tool is the media query, and the main mindset is mobile-first. Let’s dig in.
Why responsiveness matters
Today, more than half of all web traffic comes from phones. If your site only works on desktop, you’re turning away most of your visitors. Search engines noticed this long ago — Google ranks mobile-friendly sites higher. So responsive design isn’t a nice-to-have; it’s the baseline expectation for any real website.
The goal is easy to state: one set of HTML and CSS that reshapes itself to fit whatever screen it lands on. Not a separate mobile site, not an app — the same page, adapting. Here’s how you do it.
The first ingredient: the viewport meta tag
Before any CSS, there’s a single line of HTML that responsive design leans on. You may remember it from the HTML document structure article — the viewport meta tag, which lives in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Without this line, phones assume your page was built for a desktop and shrink the whole thing down to fit, leaving everything tiny. The tag tells the browser “use the device’s real width and don’t zoom out.” Everything else rests on it — so if your responsive CSS just isn’t working, a missing viewport tag is the first thing to check.
Media queries: different styles for different screens
The heart of responsive design is the media query — a way to apply CSS only when the screen meets some condition, like being narrower than a certain width. The syntax looks like this:
/* Default styles apply to all screens */
.container {
font-size: 18px;
}
/* These styles apply ONLY when the screen is 600px wide or less */
@media (max-width: 600px) {
.container {
font-size: 14px;
}
}The @media (max-width: 600px) { ... } block is the media query. Everything inside it applies only on screens 600px wide or narrower — typically phones. On wider screens those rules are simply ignored and the defaults take over. That’s how a single stylesheet serves different layouts to different devices.
You can use max-width (apply below a size) or min-width (apply above a size), and that one idea — CSS that switches on conditionally — is the entire mechanism behind responsive design.
Breakpoints: where the layout changes
The specific widths where you switch the layout are called breakpoints — the screen sizes at which your design “breaks” into a new arrangement, like a three-column grid collapsing to a single column on phones. There’s no official list, but the common breakpoints roughly track device categories:
| Breakpoint | Typically targets |
|---|---|
| ~480px | Phones |
| ~768px | Tablets |
| ~1024px | Small laptops |
| ~1280px+ | Desktops |
You don’t need to support every one of these. The practical approach most people take is just one or two breakpoints — say, a single point where a multi-column layout drops to one column for small screens. Pick your breakpoints based on where your design starts to look awkward, not on specific devices.
A responsive layout in action
Let’s build a card grid that’s three columns on desktop and one column on phones. Thanks to Grid, it stays clean:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.cards {
grid-template-columns: 1fr; /* one column on small screens */
}
}On wide screens the cards sit in three columns. When the screen drops to 768px or narrower, the media query kicks in and switches to one column, so each card gets the full width and stays readable. That’s responsive design in a nutshell — sensible defaults, then media queries to adjust only where you need to.
The mobile-first approach
There are two ways to write responsive CSS, and the recommended one is mobile-first. Instead of designing for desktop and then squeezing things down, you write your base styles for small screens first, then use min-width media queries to add complexity as the screen grows:
/* Base: mobile styles (one column) */
.cards {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* Larger screens: add more columns */
@media (min-width: 768px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}Why mobile-first is the better habit
Building mobile-first means your simplest, most essential layout is the default, and you progressively enhance it for bigger screens. That tends to produce cleaner CSS, forces you to prioritize the core content, and matches the reality that most visitors are on phones. It can feel backwards at first if you’re used to designing on a big screen, but it’s the approach most professionals reach for — start small, then build up.
Flexible units help too
Media queries handle the big layout changes, but a surprising amount of responsiveness comes for free when you use flexible units instead of fixed pixels. A few that help your design adapt on its own:
- Percentages (
width: 100%) size elements relative to their container, so they shrink and grow with it. remfor font sizes scales text consistently and respects user settings.frin Grid andflexin Flexbox (which you’ve already met) distribute space proportionally.max-widthis a great trick:max-width: 800pxlets an element be up to 800px wide on big screens but shrink freely on small ones.
One powerful pattern combines several of these — a content container that’s centered and capped in width but fully flexible below that cap:
.container {
width: 90%;
max-width: 1100px;
margin: 0 auto;
}This stays comfortably narrow on a huge monitor (capped at 1100px) but flows out to fill 90% of the width on a phone. Patterns like this make a layout adapt smoothly before you’ve written a single media query.
Test on real sizes
You don’t need a drawer full of devices to check your work. Open your browser’s developer tools and look for the “device toolbar” or “responsive mode” (usually a little phone/tablet icon). It lets you preview the page at any screen size and quickly spot where things break. Drag the window edge too — watching your layout reflow as it narrows is one of the fastest ways to catch responsive problems and confirm your breakpoints are pulling their weight.
Wrapping up — and the end of CSS basics
Responsive design makes your site work everywhere, and now you can build it:
- Always include the viewport meta tag — it’s the foundation responsiveness depends on.
- Media queries (
@media (max-width: 600px) { ... }) apply CSS conditionally based on screen size. - Breakpoints are the widths where your layout changes; one or two well-chosen ones often suffice.
- Mobile-first (base styles for small screens,
min-widthqueries to enhance for larger ones) is the recommended approach. - Flexible units — percentages,
rem,fr,flex, andmax-width— make layouts adapt with little extra effort.
And that completes the CSS fundamentals. Across this section you’ve gone from “what is CSS” all the way through selectors, colors, the box model, typography, Flexbox, Grid, and now responsive design. You can take plain HTML and turn it into a styled, polished, fully responsive website — a genuinely powerful skill set.
From here, the third and final layer of the web is waiting: JavaScript, the language that makes pages interactive — responding to clicks, updating content, and bringing your beautifully styled HTML to life. That’s a whole new adventure, and you’re ready for it.
