CSSBeginner6h

Responsive design.

One codebase, every screen — clamp, container queries, fluid type.

What is it?

Responsive design means one HTML/CSS payload renders cleanly from a 320px phone to a 4K monitor. Old responsive thinking was three media-query breakpoints. New responsive thinking is fluid units (clamp), container queries, and intrinsic sizing — the page adapts continuously, not in jumps.

Why it matters

Mobile is the majority of traffic for most sites. A page that looks fine on a 1440px laptop and breaks on the 390px iPhone the user opened it on won't survive a single hiring panel. Modern responsive shifts the burden from "design three layouts" to "design one layout that breathes."

What to learn

  • Mobile-first: write the small-screen styles first, layer media queries up
  • Media queries: min-width vs max-width, and why one wins per project
  • Fluid type and space: clamp(min, fluid, max) for everything sizable
  • Container queries: components that respond to their width, not the viewport
  • The viewport meta tag (and why you'll never ship without it)
  • The 100dvh fix for mobile address bars

Common pitfall

Designing every breakpoint in pixels and watching tablet (768–1023px) land in a no-man's-land where everything looks slightly off. Use clamp() for type and spacing so the site adapts continuously, and only add media queries where the layout has to change (1-col → 2-col), not where the type is too big.

Resources

Primary (free):

Practice

Take a design at 1440px (any landing page). Reduce the viewport to 320px without writing a single media query — only adjust units, clamp(), and flex/grid auto-fit. Then add one media query where you couldn't avoid a real layout change. Done when the page reads cleanly at every viewport between 320 and 2560.

Outcomes

  • Write a fluid type scale with clamp() for any project from scratch.
  • Pick the right responsive technique (media query vs container query vs intrinsic).
  • Decide when 100dvh matters vs 100vh.
  • Audit a site at three screen sizes and identify the breakpoints that need work.
Back to Frontend roadmap →