Responsive layout: the basic rules

The main rule

Start from the narrow screen, not the wide one. It's easier: first a simple single-column layout, then added complexity for larger screens.

The reverse is more painful: a layout designed for a wide monitor has to be broken apart to fit a phone.

Three things without which nothing works

The viewport declaration. A line in the document head, without which mobile browsers pretend to be a wide screen and shrink the whole page. It's forgotten remarkably often.

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

Flexible sizes instead of rigid ones. Widths in percentages or fractions of available space rather than fixed pixels.

Images that don't overflow. One rule that saves you from horizontal scrolling:

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

Breakpoints

Rules that apply from a given width upwards:

.layout { display: block; }

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 240px 1fr;
  }
}

Below 768 pixels everything stacks; above it, a sidebar and content.

How many you need. Usually two or three: phone, tablet, wide screen. Five or more suggests the layout should have been designed differently.

Where to put them. Not at specific device sizes but where the layout starts looking bad. Stretch the window and watch where it breaks — that's your breakpoint.

What's often forgotten

Touch targets. A button the size of an icon is fine with a mouse and awkward with a finger. Around forty pixels a side is the minimum.

Horizontal scrolling. One element wider than the screen and the whole page slides sideways. Found by looking on a phone.

Long words and links. They break layouts on narrow screens. Fixed with a wrapping rule.

Fixed heights. On a phone text is taller, and content gets clipped.

A header taking half the screen. Impressive on a monitor, leaves no room for content on a phone.

Modern capabilities

Mechanisms exist that avoid breakpoints entirely: a grid that fits as many columns as will fit, or sizes clamped between a minimum and a maximum.

That approach is more robust because it doesn't depend on specific widths. Use it where you can.

How to check

On a real phone. Essential. A narrowed browser window shows neither touch behaviour nor mobile browser quirks nor real font sizes.

On a wide monitor. The opposite problem: a page stretched across two metres where a line of text spans the entire screen and can't be read. Cap the maximum content width.

With enlarged text. Some people set a large system font. Layouts built on rigid pixels break for them.

With long content. Paste in text three times longer than expected and see what happens.

A page that survives those four checks is ready for real visitors.