Responsive Design & Media Queries

A responsive site adapts its layout to any screen — phones, tablets, laptops, printouts — from one set of HTML. This chapter teaches the mobile-first method, media query syntax, breakpoint strategy, and the modern media features every site should support.

What makes a page responsive?

1. Fluid foundations — relative units, flexible grids (minmax, fr), images that scale (max-width: 100%).
2. Media queries — apply different CSS only where the viewport warrants it.
3. Content-first decisions — decide what changes at each size, based on your content, not on device names.

Media query syntax

/* Mobile-first: styles for every screen ≥ 640px */
.sidebar { display: none; }

@media (min-width: 640px) {
  .sidebar { display: block; }
}

The classic (desktop-first) inverse also exists — @media (max-width: 1023px) — but mobile-first is easier to reason about: base styles are the smallest screen, each query adds capability. Combining conditions:

@media (min-width: 768px) and (max-width: 1023px) { … }   /* AND */
@media (max-width: 639px), (min-height: 900px) { … }       /* OR */

Breakpoints: choose them from content

Breakpoints are widths where your design "breaks" (looks wrong), not device names. Watch your layout while resizing — set a query where it needs help.

Three to five queries are plenty. Prefer min-width queries in ascending order — one-way doors that only ever add styles.

Practical example: a responsive two-column article

/* base = phone */
.article-layout { display: grid; gap: 2rem; }

@media (min-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
}

Expected output: content first on phones (with the aside below it — good DOM order for screen readers), side-by-side columns on desktop, without duplicating any markup.

Modern media features you should use

.card { transition: transform 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Responsive images (the HTML side)

Media queries pair with responsive images — the markup uses srcset and sizes (see the HTML images chapter) while CSS constrains them:

img, video { max-width: 100%; height: auto; display: block; }

Touch-friendly rules

• Tap targets at least ~44×44 px with comfortable spacing.
• Hover-only menus need a tap fallback (an always-visible toggle button).
• Don't hide critical content at small sizes — moving it below is fine, removing it is not.

Testing workflow

1. Use dev tools' responsive mode (Cmd/Ctrl+Shift+M) and test 320, 768, 1024, 1440.
2. Rotate and check for horizontal scrolling — there should be none at any width.
3. Test with 200% browser zoom and larger default fonts.
4. Then on a real phone: tap targets, sticky headers, keyboard behavior.

Common mistakes

• Too many breakpoints — width ranges between 4 well-chosen queries are already fluid.
• Device-based queries ("iPhone width") — content-based widths survive new devices.
• Hiding content on mobile — reordering is fine; deleting information hurts SEO and users.
• Forgetting the desktop extreme — add a max-width container (72–1200 px) so lines don't run across a 27" monitor.
• Ignoring reduced motion — animations can cause nausea; always include the query above.

Practice checklist

1. Take any two-column layout and make it single-column below 900 px — mobile-first.
2. Resize from 320→1440 and confirm zero horizontal scroll at every step.
3. Add prefers-reduced-motion handling to an animated component.

Now give your pages presence — Backgrounds, Borders & Shadows is next.