WCAG 1.4.10 — Reflow
Squeeze the viewport to 320 CSS pixels — roughly a 400% zoom on a phone — and the content should reflow into a single column with no horizontal scrollbar. Either it does, or it doesn't, and an awful lot of marketing sites don't.
What this requires
Content must reflow into a single column at a viewport width of 320 CSS pixels (vertical scrolling content) or 256 CSS pixels (horizontal scrolling content) without loss of information or functionality and without requiring scrolling in two dimensions. The exception is content that genuinely needs two dimensions to convey information — data tables, maps, complex diagrams, video — which may scroll horizontally for that block alone.
How AI coding tools fail this
When asked to build a marketing page that "looks like the Figma at 1440px", AI tools deliver a layout that visually approximates the design and breaks at narrow viewports. The most common failure shapes:
- Containers with fixed widths (
w-[1200px]) that overflow the viewport and trigger horizontal scrolling. - Tables, cards, or button rows that don't wrap, forcing a horizontal scrollbar across the whole page.
- Modal dialogs with absolute heights and widths that get cut off below the viewport edge.
- "Cards in a row" layouts that don't collapse to a column at narrower breakpoints.
The second pattern: media that overflows without a wrapper — a wide
data visualisation embedded as an SVG with no max-width constraint,
or an iframe set to width="800".
Edge cases
- 320 CSS pixels is roughly a 400% zoom on a 1280-pixel-wide laptop, or a portrait iPhone SE. It is the minimum width the criterion requires layouts to reflow to.
- Data tables, maps, diagrams, video, and toolbars with critical inline controls are explicitly exempt — they may scroll horizontally within their own region.
- Scrollable side panels count as horizontal scrolling at the page level if the whole page doesn't fit; they're fine if they're contained.
- Fixed-position elements (a sticky header, a chat widget) must not cover so much of the viewport that content becomes unreachable at 320 CSS pixels.
- 1.4.10 vs 1.4.4: 1.4.4 is about text size; 1.4.10 is about viewport width. Most failures of 1.4.10 are CSS sizing issues, not font issues.
How Jeikin handles this
Reflow needs runtime rendering. Jeikin's guided review captures
screenshots at 320 CSS-pixel width per page and flags pages where
horizontal scrolling appears. The dashboard records the visual
evidence per page. Component-level CSS hints (fixed-width containers,
min-width declarations) are flagged as leading indicators in the
scanner.