The page frame, on every screen

This little landing page has four faults that readers notice before they read a single word. The pink marks show where. Fix them one switch at a time.

Before anyone notices a typeface or a shadow, they judge the frame. Their complaints sound vague ("everything is shifted to one side", "big random blank spaces", "I can't tell what this is"), but each one is measurable.

Five measurable rules

taste-skill measured 97 award-winning sites in October 2026, and the strong pages agree on these:

And: give every section of 30+ words a heading, and start most text on the same few left edges.

Spacing that holds the frame: sections about 120–240px apart on desktop and 72–112px on a phone, the gap between sections clearly larger than any gap inside one, and at least twice as much space above a heading as below it.

A rest is not a hole

Empty space is fine when something frames it: a picture with the type docked to its edge, a headline big enough to span it. When nothing closes it off, it's a hole. Holes usually come from stretched section gaps, text in one half of the width, or content waiting on a scroll animation to appear.

When a section looks empty, make its main element bigger or cut it. Adding a decoration is almost never the fix. Scroll-triggered reveals cause holes: until they fire, that section is bare ground.

Each screen size gets its own design

Responsive doesn't mean "squeeze the desktop layout until it fits". It means each size gets a composition designed for it. Drag the frame's handle below; the layout answers to the frame, not your window.

Typical swaps from the skill:

What stays the same: the components. A button looks the same on every screen; the screen it's on changes.

That demo uses a container query, so the component adapts to the box it sits in. Its breakpoints are where the content stops fitting, not a device list.

Narrow columns are valid

A common mistake is making content full-width because the screen allows it. A 2,400px paragraph is unreadable, so reading content keeps a narrow column (about 65ch) even on a huge monitor, as in the demo.

For everything else, a 12-column grid is the flexible base: 12 divides into halves, thirds, quarters and sixths. On marketing pages you can then break the grid on purpose (a pull quote that hangs into the margin, a bento of different-sized tiles). Inside the product, hold the grid; forms stay single-column, dashboards stay symmetric.

Review this landing page at 1440, 768 and 390 wide:
- One pair of equal left/right margins at each width; header and body share the same inset; no text closer than 16px (12px on phones) to the edge.
- No section with text in one half and nothing in the other; no empty run over half a screen; section gaps 120–240px desktop, 72–112px mobile.
- The first screen's h1 says what the product is, readable on first paint. Every section of 30+ words has a heading.
- Design the 390 layout on its own (tab bar, peeking card row, stacked hero) rather than shrinking desktop. Reading columns max 65ch.