What Is Responsive Design and How Do You Make a Site Responsive?

Responsive design is a way of building one website so its layout adapts to the screen it's viewed on—phones, tablets, and desktops—rather than maintaining a separate mobile site or shrinking a desktop layout. You make a site responsive by combining three core techniques: fluid grids, flexible images, and CSS media queries, plus a viewport meta tag and relative units. This applies to any site that needs to work across screen sizes; it does not, by itself, guarantee performance, accessibility, or that a design will look identical in every browser.

Responsive design vs. separate mobile sites vs. simple scaling

These three approaches are often confused, but they solve the problem differently:

Responsive design is generally the default choice when you want a single, maintainable site. A separate mobile site can still make sense in narrow cases where mobile content is genuinely different, but it adds overhead that responsive design avoids.

The three core techniques

1. Fluid grids

Instead of fixed pixel widths, columns are sized in relative units so they expand and contract with the viewport. A common pattern is a percentage-based grid where a main column and sidebar share the available width.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.column {
  width: 65%;
  float: left;
}
.sidebar {
  width: 30%;
  float: right;
}

The max-width keeps the layout from stretching uncomfortably on very large screens, while the percentage widths let it shrink on smaller ones.

2. Flexible images

Images should never overflow their container. Setting a maximum width of 100% lets them scale down while preserving aspect ratio:

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

For sharper results on high-density screens, consider serving different image sizes with srcset, but the max-width rule is the baseline that prevents overflow.

3. CSS media queries

Media queries apply different styles at different viewport widths. They are the mechanism that turns a fluid layout into a deliberately rearranged one:

/* Base styles: mobile-first */
.column, .sidebar {
  width: 100%;
}

/* Tablet and up */
@media (min-width: 768px) {
  .column { width: 65%; float: left; }
  .sidebar { width: 30%; float: right; }
}

Set the viewport meta tag

Without this tag, mobile browsers assume a desktop-width page and zoom out, which defeats the whole approach. Place it in the <head>:

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

width=device-width tells the browser to match the CSS pixel width to the device's width, and initial-scale=1 sets the starting zoom level. This is the single most common reason a responsive layout looks wrong on a real phone despite working in a resized desktop browser.

Use relative units, not fixed pixels

Relative units let sizes scale with context:

• % — relative to the parent element's width, useful for layout columns.
• em — relative to the current element's font size; compounds when nested.
• rem — relative to the root (html) font size; more predictable than em for spacing and type scales.

html { font-size: 100%; }      /* typically 16px */
h1 { font-size: 2rem; }        /* 32px, scales with root */
p  { margin-bottom: 1.5rem; }

Using rem for typography and spacing makes the whole layout respond when a user changes their browser's default font size—an accessibility benefit that fixed pixels don't provide.

A mobile-first workflow

Mobile-first means writing the base CSS for the smallest screen, then adding complexity at larger widths with min-width media queries. This tends to produce leaner CSS because you add rules only when there's room for them.

1. Start with the single-column layout. Everything stacks; no floats or multi-column grids yet.
2. Add a breakpoint for tablets (commonly around 768px) where a second column becomes viable.
3. Add a breakpoint for desktops (commonly around 1024px or 1200px) for wider grids and larger spacing.
4. Test at each stage before moving up.

Common breakpoint choices cluster around 480px, 768px, 1024px, and 1200px, but these are conventions, not rules. The better practice is to add a breakpoint where the content starts to break, not at a device's exact width.

How to test responsiveness

• Resize the browser window slowly from wide to narrow and watch for layout breaks.
• Use browser developer tools (device toolbar) to simulate common phone and tablet sizes.
• Check for horizontal scrolling—if a horizontal scrollbar appears, something is overflowing.
• Test on a real device when possible; emulators miss touch and font-rendering behavior.
• Zoom the text to 200% to confirm the layout still holds.

Frequent failures

• Fixed widths on containers or images cause overflow and horizontal scrolling.
• Missing viewport meta tag makes mobile browsers render a zoomed-out desktop page.
• Text too small to tap or read because font sizes were set in fixed pixels and never scale.
• Breakpoints tied to specific devices rather than to where the content actually breaks.
• Images without max-width: 100% spilling out of their columns.
• Assuming responsive equals fast—layout adaptation and performance are separate concerns.

If you're working with a web design or development team, these are the specific things worth confirming: that the viewport tag is present, that layout uses relative units, and that breakpoints were chosen around content rather than a device list.