# The page frame, on every screen

> Get the frame readers judge first right (equal margins, no holes, a first screen that says what this is) and design each screen size on purpose.

Module: Layout and pages · Level: beginner · 8 min · https://school.agents.org.in/design/layout/page-frame

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.

*[Interactive demo: Lopsided margins, a half-empty section, a hole, and a headline that says nothing.]*

Before anyone notices a typeface or a shadow, they judge the frame (The overall shape of a page that readers judge before any detail: its margins, how the width is used, the gaps between sections, and whether the first screen says what this is). 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:

| Rule | Fails when |
|---|---|
| **One pair of equal margins** | The left and right distances differ, or the header sits on one inset and the page on another. |
| **Text never touches the edge** | Under 16px on desktop, under 12px on a phone. |
| **Use the width you set up** | A text section sits in one half with nothing in the other. Give the empty half the section's picture, a second column or a list. |
| **No holes** | Over about half a screen holds nothing, or the gap between two sections passes about 40% of a screen. |
| **Say what this is, first** | The first screen's headline is missing, or only a slogan. 15 of the 97 sites never said what the product was, and lost marks for it. |

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 (A stretch of a page with nothing in it and nothing closing it off, like a giant gap between sections. Different from a deliberate rest, which something frames). 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 (Making a layout work on every screen size. Done well, each size gets its own composition, not a squeezed copy of the desktop one) 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.

*[Interactive demo: Wide: sidebar and a three-card grid. Narrow: a bottom tab bar and a row of cards that peeks so you know it scrolls.]*

Typical swaps from the skill:

| Desktop | Phone |
|---|---|
| Sidebar + content | Bottom tab bar + full-width content |
| 3-column card grid | A swipeable row, or a stack in a different order |
| Wide hero, image right | Stacked hero, image full width below |
| Dense table | One card per row with the key fields first |

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 (CSS that lets a component change its layout based on the width of the box it sits in, rather than the whole window. A card can then work in a sidebar and in a wide grid), so the component adapts to the box it sits in. Its breakpoints (The width at which a layout changes, for example from one column to two. Good breakpoints come from where the content stops fitting, not from a device list) 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 (A page divided into 12 equal columns. 12 splits into halves, thirds, quarters and sixths, so it fits most layouts) 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.

**Check the page frame (paste into your agent):**

```text
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.
```

**Check yourself:** A feature section has two lines of text on the left half and nothing on the right. What does the skill suggest?

- [ ] Add a decorative blob on the right
- [x] Give the empty half the section's picture, a second column or a list, or make the main element bigger
- [ ] Center the text
- [ ] Increase the section's padding

*Why:* Use the width you set up. An empty half reads as a hole; fill it with real content or enlarge the main element. Decoration is almost never the fix.

## In the skill

- https://school.agents.org.in/skill/layout/page-frame.md
- https://school.agents.org.in/skill/layout/viewport-custom-design.md