Your 320px Reflow Test Is Failing: Stop Guessing and Start Coding

You think your mobile site is fine because it looks okay on your iPhone 15? That's wrong. The real test is at 320 CSS pixels—the width where WCAG 2.1 Reflow (Level AA) says content must not require two-dimensional scrolling. And if your site fails that test, you're not just losing users; you're potentially breaking the law for public entities under the DOJ's ADA Title II rule. Let's walk through a realistic scenario and fix it step by step.

Imagine You're Rebuilding a City Parks Department Site

You've just landed a project for a local parks department. They need a site with event listings, trail maps, and a reservation form. You're building it with a mobile-first approach, using fluid grids and flexible images as MDN recommends. But the moment you test at 320px, the event cards overflow, the map iframe forces horizontal scrolling, and the reservation form's date picker is a nightmare. This is where the rubber meets the road.

Start with the Viewport and a Fluid Grid

First, make sure your HTML has the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, mobile browsers assume a desktop width and your responsive CSS never kicks in. Next, build your layout with relative units, not fixed pixels. Use percentages, fr units, and clamp() for fluid typography. For example, set your body font with font-size: clamp(1rem, 2.5vw, 1.25rem) so it scales smoothly between 16px and 20px. And remember: never use viewport units alone for font size—they prevent zooming. Combine them with fixed units, like calc(1rem + 0.5vw).

Images and Layout: The 320px Breaking Points

Your trail maps are the biggest culprit. If you have an <img> without max-width: 100%, it will blow out the layout. Add img { max-width: 100%; height: auto; } to your CSS. For art direction—say, a different crop of a map on mobile—use the <picture> element with <source> elements and a fallback <img>. And always set width and height attributes on images to reserve space and prevent layout shift, which hits your Core Web Vitals CLS score. For the grid, use CSS Grid with fr units or Flexbox with flex-wrap. Add breakpoints when content demands them, not at arbitrary device sizes. Common reference values are 375px, 768px, 1024px, 1440px—but test at 320px first.

Form Fields and Touch Targets: Don't Make Users Fat-Finger

Your reservation form needs usable controls. WCAG 2.2 Target Size (Minimum, Level AA) requires pointer targets to be at least 24 by 24 CSS pixels, but that's a bare minimum. Apple's Human Interface Guidelines recommend 44 by 44 points, and Android's Material Design says 48 by 48 dp. Aim for 44px at least. Also, ensure every input has a visible label, programmatically associated, so screen readers and keyboard users know what to enter. When a user submits an empty required field, identify the error in text—WCAG 3.3.1 Error Identification. Don't rely on color alone; add an icon or text like "Required."

Keyboard and Focus: The Invisible Test

Many developers skip keyboard testing. WCAG 2.1 Keyboard (Level A) requires all functionality operable via keyboard. Tab through your site: can you reach every link and button? Is the focus indicator visible? WCAG 2.1 Focus Visible (Level AA) says it must be. And WCAG 2.2 Focus Not Obscured (Minimum) says the focused element must not be hidden by sticky headers or popups. So keep your sticky nav from covering the focused element—maybe add a scroll-margin-top to your sections. Test this at 320px width, because that's where sticky headers often eat the entire viewport.

Performance and the 320px Load

Your site's mobile performance is judged by Core Web Vitals: LCP (loading) should be 2.5 seconds or less, INP (interactivity) 200ms or less, and CLS 0.1 or less, measured at the 75th percentile on mobile. At 320px, every kilobyte counts. Use loading="lazy" on off-screen images to defer them until the user scrolls near. But don't lazy-load the hero image—that hurts LCP. Compress your images and use srcset with sizes to serve the right resolution. And keep your JavaScript lean: a 10-second delay loses the user's attention, but even 1 second interrupts flow. At 320px, every millisecond matters.

Quick tip: Test your site at 320px using Chrome DevTools device toolbar, and enable "Media queries" to see your breakpoints. You'll be surprised what breaks.

What I'd actually do

Here's my blunt advice: stop designing for the latest iPhone. Start every project with a 320px-wide canvas and a keyboard-only test. Use fluid grids and fluid type with clamp(), but respect the 320px reflow rule. Ensure all images are responsive with max-width: 100% and intrinsic dimensions. Make every touch target at least 44px. And for goodness' sake, run an automated accessibility check—WebAIM's Million study found that 95.9% of home pages have WCAG failures, with low contrast being the most common. Don't be part of that statistic. If you do these things, you'll not only pass WCAG 2.1 AA, but you'll also satisfy the DOJ's ADA Title II rule for public entities, which requires WCAG 2.1 AA compliance by April 24, 2026 for larger entities. That's not a suggestion; it's a deadline.

Sources

• MDN Web Docs - https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
• WCAG 2.1 (AA) - https://www.w3.org/WAI/WCAG21/quickref/
• W3C WCAG 2.1 Understanding Reflow - https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
• web.dev (Web Vitals) - https://web.dev/articles/vitals
• Apple Human Interface Guidelines - https://developer.apple.com/design/human-interface-guidelines/accessibility
• WebAIM Million - https://webaim.org/projects/million/