Zoom your landing page to 200% before you ship it: a two-minute check

Most of us check a landing page at the size of our own screen. Plenty of visitors don't see it that way: they zoom in, use a larger default font, or browse on a small window. Here is a short check that catches the most common breakage.

The check

1. Open the page in a desktop browser.
2. Press Ctrl and + (Cmd and + on a Mac) until you reach 200%.
3. Scroll the whole page, top to bottom.
4. Zoom further, to 400%, and scroll again.

Two WCAG success criteria cover this:

• 1.4.4 Resize Text: text can be resized up to 200% without loss of content or functionality.
• 1.4.10 Reflow: content can be presented without loss of information or functionality, and without scrolling in two dimensions, at a width of 320 CSS pixels. W3C notes that this is the same as a 1280 pixel wide window at 400% zoom. Parts that need a two-dimensional layout, such as data tables, maps and diagrams, are an exception. A single column is a common way to meet it, but the requirement is the lack of sideways scrolling and of lost content, not a specific layout.

What usually breaks

• Fixed-height hero sections. If the hero has height: 600px, big text spills over the next section. Use min-height instead.
• Text that gets clipped. Buttons or cards with a fixed width and overflow: hidden cut off labels. Let them grow.
• A sticky header that eats the screen. At 200%, a tall fixed header can cover half the viewport. Check that you can still reach the content under it.
• Sideways scrolling. Usually one wide element, like a pricing table or a code block, pushes the page past the viewport. Wrap it in its own scroll area.
• Font sizes in px. If someone sets a larger default font in their browser, px text ignores it. Using rem for body text respects it.

A quick way to find the culprit

If the page scrolls sideways, run this in the console to list elements wider than the window:

[...document.querySelectorAll('*')].filter(
  (el) => el.getBoundingClientRect().right > document.documentElement.clientWidth
);

The first few results are normally the cause.

One fix worth making today

Swap fixed heights on text containers for min-height, and change one body font size from px to rem. Both are small edits and both help at any zoom level.

What's the first thing that broke when you zoomed one of your own pages?