Responsive web design is the practice of building a single website that adapts gracefully to any screen - from a small phone in one hand to a wide desktop monitor. Instead of maintaining separate sites for different devices, you write flexible layouts that reflow, resize and rearrange based on the space available. With the majority of web traffic now on mobile, responsive design isn’t optional; it’s the baseline. This guide walks through the core techniques, with real code you can adapt.

Start with the viewport meta tag

Before any CSS matters, your pages need one line in the <head> that tells mobile browsers to use the device’s real width instead of pretending to be a desktop:

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

Without it, phones render your page at a zoomed-out desktop width and your media queries never fire correctly. It’s the foundation everything else sits on.

Design mobile-first

Mobile-first means writing your base styles for the smallest screen, then progressively enhancing for larger ones with min-width media queries. This approach produces leaner CSS, forces you to prioritise the essentials, and delivers the lightest experience to the devices that need it most. Building up from small is almost always easier than cramming a desktop layout down.

Fluid grids and relative units

Fixed pixel widths break the moment a screen is a different size. Responsive layouts use relative units so everything scales with context:

  • % - widths relative to the parent, for fluid columns.
  • rem - sizing relative to the root font size, ideal for consistent spacing and type.
  • em - relative to the element’s own font size, useful for component-scoped spacing.
  • vw / vh - a percentage of the viewport, handy for fluid hero sections and headings.

Reaching for rem and % instead of hard-coded pixels is one of the simplest habits that makes a layout genuinely flexible.

Flexible images

Images are a classic source of horizontal scrollbars. The single most important rule is to stop them overflowing their container:

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

For sharper results and less wasted bandwidth, serve appropriately sized images with srcset and sizes, so the browser picks the best file for the device and viewport rather than downloading a huge desktop image onto a phone.

Media queries and sensible breakpoints

Media queries apply different styles at different viewport sizes. The key mindset shift: set breakpoints where your content starts to break - not at arbitrary device widths. Here’s a mobile-first example that stacks cards on small screens and switches to a multi-column grid as space allows:

styles.css
/* Base: mobile-first - single column */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet and up: two columns */
@media (min-width: 48rem) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: auto-fit as many columns as fit */
@media (min-width: 64rem) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

Using rem-based breakpoints (48rem, 64rem) keeps them consistent with the user’s font settings, and auto-fit with minmax() lets the grid decide its own column count - a genuinely fluid layout with very little code.

Good responsive design isn’t about designing for devices. It’s about designing for content that flows wherever it lands. - The Solution On IT design team

CSS Grid and Flexbox do the heavy lifting

Modern layout is built on two complementary tools. Flexbox excels at distributing items along a single axis - navigation bars, button rows, card footers - and handles wrapping and alignment elegantly. CSS Grid is built for two-dimensional layouts - page structures, galleries and dashboards - where you control rows and columns together. Most responsive layouts use both: Grid for the overall structure, Flexbox for the components inside it. Together they replace almost every float-and-clear hack of the past.

Container queries: the modern upgrade

Media queries respond to the whole viewport, but a component often cares about the space it occupies, not the page. Container queries solve this: a card can switch from stacked to side-by-side based on the width of its container, so the same component works whether it sits in a narrow sidebar or a wide main column. Now supported across modern browsers, they make truly reusable, context-aware components possible - a big step forward for design systems.

Don’t forget touch targets

Responsive isn’t only about layout - it’s about being usable by a fingertip. Interactive elements should be large enough to tap comfortably and spaced so people don’t hit the wrong one. WCAG 2.2 introduced a minimum target size guideline for exactly this reason. Generous, well-spaced buttons and links make a mobile interface feel effortless.

Test across real devices

Browser dev tools are great for quick checks, but they can’t fully reproduce touch behaviour, real network conditions or how a device actually renders. Test on a range of physical phones and tablets where you can, across different browsers, and check both orientations. Real-device testing catches the issues emulators quietly hide.

Common mistakes to avoid

  • Forgetting the viewport meta tag. Everything else responsive fails without it.
  • Fixed-width elements. A single hard-coded pixel width can trigger horizontal scrolling on mobile.
  • Desktop-first CSS. Overriding a heavy desktop layout downward is harder and heavier than building up.
  • Device-specific breakpoints. Chasing exact phone models is a losing game - let content decide.
  • Tiny, crowded tap targets. Links and buttons that are hard to hit frustrate mobile users.

Best practices to follow

  1. Always set the viewport meta tag. It’s the non-negotiable first step.
  2. Write mobile-first, min-width queries. Start small and enhance upward.
  3. Use relative units. Prefer rem, % and vw over fixed pixels for anything that should scale.
  4. Make images flexible. max-width: 100% plus srcset for the right file per device.
  5. Let content set your breakpoints. Break where the layout strains, not at device sizes.
  6. Reach for Grid, Flexbox and container queries. Modern CSS makes flexible layouts simpler than ever.

Responsive design is a core part of every build in our web design service, and it works hand in hand with the modern design trends that keep interfaces feeling current.

Frequently asked questions