Reflow (320px width).

Content must work at 320px width without horizontal scrolling — mobile and zoom users

What does this check test?

This check verifies that content can be presented at a width of 320 CSS pixels without requiring horizontal scrolling for vertically-scrolling content (or 256 CSS pixels height for horizontally-scrolling content). This is equivalent to a 1280px desktop viewport at 400% zoom. The content must reflow — text wraps, images scale, layouts adjust — rather than simply being cropped or requiring side-scrolling. This maps to WCAG 2.2 Success Criterion 1.4.10 (Level AA), introduced in WCAG 2.1.

Why does it matter?

Users with low vision who zoom to 400% effectively see a 320px-wide viewport. If content does not reflow at this width, these users must scroll horizontally on every line of text, which makes reading nearly impossible. This criterion also benefits mobile users on small screens and users of narrow browser windows (side-by-side multitasking). Horizontal scrolling for text is one of the most disorienting and frustrating barriers — users lose their reading position constantly.

Who is affected?

Front-end developers building responsive layouts, CSS architects defining breakpoints and grid systems, designers creating responsive design specifications, and QA engineers testing narrow viewports. Teams using CSS Grid or Flexbox should verify their layouts handle extreme narrow widths gracefully.

Where does this apply?

All pages and components, especially those with wide layouts: data tables, multi-column forms, horizontal navigation bars, side-by-side comparison views, code blocks, dashboard panels, and fixed-width elements. Data tables are a particular challenge — they may need to switch to a stacked card layout or use a horizontally-scrollable container (tables are an allowed exception to the no-scroll rule).

How to fix it

/* Bad: fixed width forces horizontal scroll */
.container { width: 800px; }

/* Good: fluid width that reflows */
.container {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 320px) {
  /* Stack table rows into cards */
  table, thead, tbody, tr, td { display: block; }
  thead { display: none; }
  td::before {
    content: attr(data-label);
    font-weight: bold;
  }
}

<table>
  <thead><tr><th>Name</th><th>Price</th></tr></thead>
  <tbody>
    <tr>
      <td data-label="Name">Widget</td>
      <td data-label="Price">$9.99</td>
    </tr>
  </tbody>
</table>

References

• WCAG 2.2 — Success Criterion 1.4.10 Reflow
• W3C WAI — Understanding Reflow
• web.dev — Responsive web design basics