Website reflow at 400% zoom: how to test a layout and fix what breaks
People with low vision zoom in, often a long way. At 400% zoom a 1280px-wide browser behaves like a 320px screen, and WCAG asks that content still reads in one direction, with no sideways scrolling and nothing cut off. If your site already works on a small phone, most of the job is done; the rest is hunting down fixed widths, fixed heights and text that can't grow.
Two criteria, two tests
- Resize Text (1.4.4, level AA)
- Text can be enlarged to 200% without losing content or functionality. The Resize Text understanding document lists clipped or overlapping text and form controls that don't grow with their labels as failures.
- Reflow (1.4.10, level AA)
- Content works at a width of 320 CSS pixels without scrolling in two directions, which is what a 1280px window shows at 400% zoom. The Reflow document exempts content that genuinely needs two dimensions, such as data tables, maps, diagrams and games, but not the headings and controls around them.
The two overlap. Browser zoom enlarges everything and narrows the effective viewport, so it tests both at once. Text-only zoom, available in some browsers' settings, enlarges type without changing the layout width, which catches containers that can't grow.
How to test, in ten minutes
- Set the browser window to 1280px wide. Many browsers' developer tools show the width as you resize.
- Zoom to 200% and scroll the whole page. Read every section; open every menu; fill in every form field.
- Zoom to 400%. Check that nothing scrolls sideways, apart from a data table or map inside its own scrolling box.
- Look for text overlapping other text, buttons whose labels are cut off, and sticky headers that now cover half the screen.
- Open the navigation. At 400% the phone layout usually applies, so the mobile menu must work with a mouse and keyboard as well as touch.
- Repeat on one page of each type: home, a long article, a form, anything with a table or a carousel.
What breaks, and the fix
| Symptom | Usual cause | Fix |
|---|---|---|
| Page scrolls sideways | An element with a fixed pixel width, or a grid with fixed column sizes | Use max-width with percentages, minmax(0, 1fr) columns and min() widths |
| Text cut off inside a button or card | A fixed height on the container | Let height follow content; use padding and min-height instead |
| Long words run off the edge | Unbreakable strings such as emails, URLs or long headings | overflow-wrap: anywhere on those elements, hyphens: auto on headings |
| Headline doesn't grow | Font size set only in viewport units | Use clamp() with rem bounds, and a maximum at least twice the minimum, as MDN's clamp() reference advises |
| Sticky header fills the screen | A tall fixed header that stays put when zoomed | Make it shorter on small viewports, or let it scroll away |
| Two-column form stays two columns | Columns set with a breakpoint in pixels that zoom doesn't reach | Use breakpoints that respond to the effective width, or container queries |
Design habits that make reflow easy
- Design the narrow layout first. A layout that works at 320px wide reflows at 400% zoom by definition. See mobile-first web design.
- Size text in rem and em, never pixels set in a way that can't scale, so text-only zoom works too.
- Avoid fixed heights on anything that contains text, including heroes sized to the screen height. A full-height hero on mobile is a common culprit.
- Put wide content in its own scroll box. A data table can scroll horizontally inside a container while the page around it reflows.
- Don't disable zoom. A viewport meta tag with
user-scalable=noormaximum-scale=1stops people zooming on phones.
Reflow in Anticode
Anticode's seven design systems are built to reflow. Pages from the design engine use fluid widths, grids with flexible columns and headline sizes set with clamp(), and long words in headings can wrap and hyphenate. The grids drop to fewer columns as the screen narrows, so at 400% zoom a page looks much like it does on a phone. Tables in dashboards sit inside their own scrolling box.
Hand edits can't break this the usual way: the code editor keeps only text, section order and colour tokens, and flags any other markup or CSS change rather than keeping it. The layout editor's resizes snap to columns, and its sizes are compiled into rules that keep elements within the width of their section. Very long text is the remaining risk, such as a long word in a large headline or a long email address in a narrow column.
Questions people ask
What's the difference between Resize Text and Reflow?
Resize Text asks that text can be enlarged to 200% without losing anything. Reflow asks that the layout works at 320 CSS pixels wide, the equivalent of 400% zoom, without scrolling in two directions.
Are data tables exempt from reflow?
Yes, content that needs two dimensions to make sense is exempt, but the headings, filters and controls around the table aren't.
Why does my site scroll sideways when I zoom in?
Usually something has a fixed width in pixels: an image, a grid column, a table or a long unbroken string. Find it with the browser's inspector and give it a flexible width.
Sources
- Understanding SC 1.4.10: Reflow, W3C, checked
- Understanding SC 1.4.4: Resize Text, W3C, checked
- clamp(), MDN Web Docs, checked