6 Oct 2026 · CSS guide · 6 min read

Responsive Design: A Mobile-First Approach

Most visitors arrive on a phone. Designing for the small screen first makes the whole layout stronger.

A site is not finished when it looks right on your laptop. Real visitors use phones in bright light on slow networks, tablets in the middle of the range and large monitors without a touch screen. Responsive design keeps one codebase working across all of them.

What mobile-first means

Mobile-first means writing the base CSS for the small screen and then adding enhancements as the viewport grows. The default styles target the tightest space, and media queries only ever add or adjust.

This is easier than the reverse because a single column is simple. Building outward prevents the trap of designing a wide layout and then trying to squeeze it back down.

The viewport meta tag

Without a viewport tag, phones assume a desktop width and shrink the whole page. One line in the head tells the browser to match the device width.

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

With this in place, your CSS pixels match the device, and the rest of the strategy can work.

Fluid widths and max-width

Fixed pixel widths break on small screens. Percentages and flexible units let content fill the space it is given.

.container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.card {
  width: 100%;
}

The container grows with the viewport but stops at a comfortable reading width on large screens. Text remains readable and lines do not stretch uncomfortably wide.

Media queries that enhance upward

Once the base layout is solid, add a breakpoint where the design needs more room. Because you started small, each query simply upgrades the layout.

/* base: single column for phones */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* tablets and up */
@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* desktops and up */
@media (min-width: 960px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

Using min-width keeps the cascade logical: later, wider rules layer on top of the earlier ones rather than undoing them.

Flexible images and media

An image wider than its container can cause horizontal scrolling. A single rule prevents it, and pairing it with the srcset attribute lets the browser choose a suitable file size.

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

Touch targets and readable text

Hover states do not exist on touch, so important interactions should never rely on a mouse hover to be discoverable.

Testing with emulation

Developer tools include a device toolbar that emulates common screen sizes. Toggle it to check several widths, then open the site on a real phone, because emulation cannot show how a real thumb reaches a button or how a slow connection feels.

Resize the window slowly while watching the layout. If it holds together at every width, the mobile-first foundation is doing its job.

Back to all blogs