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.

WCAG asks for text that can be resized to 200% without losing content or function (success criterion 1.4.4), and for content that reflows into a single column at a 320 CSS pixel width, which is what 400% zoom gives you on a 1280 pixel wide window (1.4.10), without needing to scroll sideways to read a line.

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?