Building Responsive Layouts That Actually Work

Tutorial · Web Development

Responsive design that only gets tested by shrinking a desktop browser window tends to break on real devices. Building mobile-first, and testing on the smallest screen first, avoids most of the usual problems.

The viewport meta tag, non-negotiable

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

Without this, mobile browsers render the page at a desktop width and zoom out — every layout technique below depends on this tag being present first.

Mobile-first media queries

/* Base styles: mobile, no media query needed */
.card { padding: 12px; font-size: 14px; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { padding: 20px; font-size: 16px; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card { padding: 32px; }
}

Writing base styles for the smallest screen and layering min-width queries on top (rather than starting from desktop and overriding down with max-width) tends to produce simpler, less contradictory CSS.

Relative units over fixed pixels

.container { width: 90%; max-width: 1200px; }
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

clamp(min, preferred, max) lets a value scale smoothly with viewport width between two bounds — one line replaces what used to take three separate media query breakpoints for font size alone.

Images that don't break layout

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

Without this, a large image can force horizontal scrolling on a small screen — one of the most common mobile layout bugs, and one line fixes it globally.

Flexbox and Grid do the rest

Combined with grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) for card layouts, or flex-wrap: wrap for a row that should stack on narrow screens, most modern responsive layouts need surprisingly few explicit breakpoints — the layout system itself adapts.