Reflow at 320 pixels and the ADA

One column at 400 percent

Content must be presentable without loss of information or functionality, and without scrolling in two dimensions, at a width equivalent to 320 CSS pixels for vertically scrolling pages. For content that scrolls horizontally, the equivalent height is 256 CSS pixels.

The easiest way to picture 320 CSS pixels is a desktop browser window 1280 pixels wide, zoomed to 400 percent. The page should become a single column that you scroll only downward. Reading a line of text must never require sliding sideways.

Some content genuinely needs two dimensions: maps, charts, data tables, video, games, and toolbars you must keep in view. Those parts may scroll both ways. Headings, search boxes, pagination and ordinary paragraphs cannot use that excuse.

Why this matters for residents who zoom

People with low vision who zoom to 400 percent do not want to pan left and right across every line. Reflow is what makes zoom practical. It also helps anyone on a narrow phone, a split-screen window or a tall, narrow tablet pane.

Court filing systems, county GIS lookups and permit dashboards are often built as desktop-first layouts with fixed columns. Those are exactly the pages where a resident has a deadline, a form to complete, and no alternative way to reach the content. If the data is truly a table or a map, scroll that component only, and keep every surrounding control within the screen width.

Two-column layouts with fixed widths

A fixed-width sidebar plus a fixed-width main column cannot shrink below the sum of their widths.

.sidebar { float: left; width: 280px; }
.content { float: left; width: 680px; }

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.sidebar { flex: 1 1 14rem; }
.content { flex: 3 1 24rem; min-width: 0; }

Fixed side navigation

A fixed side navigation steals a large share of a narrow viewport. Let it stack above the content when space is short.

.case-nav { position: fixed; top: 0; left: 0; width: 260px; }
main { margin-left: 260px; }

.case-nav { position: static; }
@media (min-width: 60em) {
  .case-nav { position: sticky; top: 0; align-self: start; width: 16rem; }
}

Form rows and dialogs

A label floated beside an input with fixed widths overflows quickly. Stack them, and let the field use the available width. The same applies to dialogs, such as a voter lookup panel.

label { float: left; width: 200px; }
input { width: 400px; }
.dialog { width: 600px; }

.field { display: grid; gap: 0.25rem; }
input { width: 100%; max-width: 25rem; }
.dialog { width: min(37.5rem, calc(100% - 2rem)); max-height: 90vh; overflow: auto; }

Grids in native apps

Native apps have no 320-pixel rule written for them in this exact form, but the idea carries over: layouts should adapt to narrow windows, large text and split-screen use instead of assuming a wide, fixed canvas.

// SwiftUI
LazyVGrid(columns: Array(repeating: GridItem(.fixed(160)), count: 3)) {
    ForEach(parks) { ParkCard(park: $0) }
}

// SwiftUI
LazyVGrid(columns: [GridItem(.adaptive(minimum: 160))]) {
    ForEach(parks) { ParkCard(park: $0) }
}

// Jetpack Compose
Row { repeat(3) { ParkCard(Modifier.width(160.dp)) } }

// Jetpack Compose
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 160.dp)) {
    items(parks) { ParkCard(it) }
}

Testing it

1. Open the page in a browser window 1280 pixels wide and zoom to 400 percent. Alternatively use the browser's device toolbar at 320 pixels wide.
2. Scroll through the whole page. There should be no horizontal scrollbar on the page, apart from components that really need two dimensions.
3. Operate the page's main task: search, fill a form, pay a bill. Nothing should be cut off or hidden.
4. Check that sticky bars and cookie banners do not cover most of the screen.
5. For vertically written text or horizontally scrolling layouts, test at 256 CSS pixels height.

Common mistakes and a ship-it list

• A min-width on the body or a wrapper that exceeds 320 pixels.
• Using the exception for a data table to excuse an entire page.
• Hiding content at narrow widths instead of reflowing it.
• Fixed-width embeds, such as a payment widget, that overflow the container.
• Long tokens, such as case numbers or URLs, that cannot wrap.

Ship it when:

• No two-dimensional scrolling occurs at 320 CSS pixels outside genuine exceptions.
• All content and functions are still present in the single-column view.
• Images, video and embeds scale with the container.
• Fixed bars leave room for the content.

Reflow works together with text resizing; the criterion on zoom has the matching checks. For vendor widgets that do not reflow, see vendors and third-party content.

Sources

• Understanding SC 1.4.10: Reflow (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.