Lesson 6 of 6

Responsive Basics

A tailor making a suit "one size fits all" ends up with something that fits nobody well. Web pages have the same problem multiplied by every phone, tablet, and monitor size in existence. A page designed only for a 1920px desktop screen looks broken — tiny text, sidebars squeezed to nothing — on a 375px phone. Responsive design is the practice of building layouts that adapt to whatever screen they land on, instead of assuming one fixed size.

💡 The Bottom Line

Responsive design rests on three habits: the viewport meta tag (tells mobile browsers to render at actual device width instead of a zoomed-out fake desktop), relative units instead of fixed pixels (so sizes scale with context), and media queries (so layout can change at specific breakpoints). Build for the smallest screen first, then add complexity as space allows — that's "mobile-first" thinking.

The viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1" />

Without this tag, mobile browsers assume your page was built for a ~980px desktop screen and zoom the whole thing out to fit — technically visible, but tiny and unreadable. This one line tells the browser "render at the device's actual width, at 100% zoom," which is the foundation every other responsive technique depends on. Every page on this site has it, in the <head>, for exactly this reason.

⚠️ Watch Out

Forgetting the viewport meta tag is one of the most common reasons a page "looks fine on my laptop but broken on my phone" — and it's invisible in normal desktop browser testing, because desktop browsers don't apply that zoomed-out behavior. Always check real pages on an actual phone (or a browser's device-simulation mode), not just a resized desktop window.

Relative units instead of fixed pixels

% — relative to the parent element's size.
rem — relative to the root (<html>) font size, so changing one root setting scales everything using rem consistently.
em — relative to the current element's own font size (compounds inside nested elements, which is worth watching for).
vw / vh — relative to the viewport's width/height, useful for "always fill the screen" sizing.

body {
  font-size: 16px; /* the root reference size */
}

h1 {
  font-size: 2rem;   /* always 32px, regardless of nesting */
}

.card p {
  font-size: 1.1em;  /* 1.1 x whatever .card's own font-size is */
}

A page built entirely in rem and % reflows naturally when the user changes their browser's font size or views on a different screen — a page built entirely in fixed px doesn't budge, which is exactly the "one size fits all suit" problem.

🙋 There Are No Dumb Questions

Q: Does that mean I should never use px at all?
A: No — px is still fine for things that genuinely shouldn't scale, like a 1px hairline border. The rule of thumb is: use relative units for anything related to reading (font sizes, spacing that should feel proportional) and reserve px for small fixed details.

Media queries

.layout {
  display: grid;
  grid-template-columns: 1fr; /* single column by default — mobile first */
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 220px 1fr; /* sidebar appears once there's room */
  }
}

A media query says "apply these rules only when this condition about the viewport is true." (min-width: 768px) means "the viewport is at least 768px wide" — so the two-column layout only kicks in once there's enough horizontal room for it, and phones simply get the single-column version with no extra code needed.

Why mobile-first, specifically

Writing the base (no media query) styles for the smallest screen, then layering min-width media queries on top to add complexity as space increases, tends to produce simpler CSS than the reverse. Building desktop-first and then trying to cram everything into a phone screen with max-width overrides usually means fighting your own earlier rules instead of building on top of them.

🔧 Try It Yourself

Take the three-card Flexbox or Grid layout you built in an earlier lesson. Add flex-direction: column (or grid-template-columns: 1fr) as the default, no media query. Then wrap a @media (min-width: 600px) block around a rule that switches back to a row/multi-column layout. Resize your browser window across that 600px line and watch the layout respond.

✅ Quick Check

Why does a page missing the viewport meta tag often look tiny and zoomed out on a phone, even though it renders fine on a desktop browser?

That's structure vs. style, the box model, selectors, Flexbox, Grid, and responsive basics — time for the recap.

← Back to