FeaturesPricingAudit GuideFree StatementDashboard →

Ensure Content Reflows at Zoom and Mobile Sizes

Learn how to make pages reflow properly at different zoom levels and mobile sizes. Includes responsive design best practices.

6 min read
serious severityWCAG Level AAWCAG 2.1 Success Criterion 1.4.10Auto-detectable

What Is It?

Reflow means content adapts its layout to fit the available width without requiring horizontal scrolling. Zoomed to 200%, content should reflow, not scroll horizontally.

Affected users: Low vision users (40+ million people), mobile users, users on small screens, aging users with presbyopia

Why It Matters

Users with low vision zoom to 200% or 400% to read comfortably. Without reflow, they must scroll horizontally for every line, making reading extremely tedious.

Good news: Automated tools check for reflow issues and viewport settings. Fixing requires responsive CSS updates.

How to Detect This Issue

Zoom page to 200% in browser (Ctrl/Cmd + +). Check if you need horizontal scrolling. Test on mobile at various widths. Check responsive breakpoints.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<div style="width: 1200px; display: flex; margin: 0 auto;"><aside style="width: 300px;"></aside><main style="width: 900px;"></main></div>
After (accessible)
<div style="display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 auto; max-width: 1200px;"><aside style="flex: 0 1 300px; min-width: 0;"></aside><main style="flex: 1 1 500px; min-width: 0;"></main></div>

Use flexible layout (flex-wrap, gap) instead of fixed widths. Set max-width instead of width. Avoid fixed pixel widths that don't reflow.

React / Next.js

Before
const Layout = ({children}) => <div style={{display: "grid", gridTemplateColumns: "300px 1fr"}}>{children}</div>
After
const Layout = ({children}) => <div style={{display: "grid", gridTemplateColumns: "clamp(250px, 20%, 400px) 1fr", gap: "1rem", maxWidth: "1200px"}}>{children}</div>

Use CSS Grid with clamp() for flexibility. Set max-width and margins. Avoid fixed column widths.

WordPress

Before
Theme with fixed width containers: max-width: 960px (won't reflow well)
After
Theme uses fluid max-width and responsive breakpoints: @media (max-width: 768px) { ... }

WordPress: use responsive theme. Check theme CSS for fixed widths. Add mobile breakpoints if missing.

Shopify Liquid

Before
Shopify store layout breaks at zoom, requires horizontal scroll at 200%
After
Store layout uses flexible containers, reflows at all zoom levels, mobile-first responsive

Shopify: test theme at 200% zoom. Ensure containers use percentages/clamp, not fixed pixels. Check media queries for mobile.

Common Mistakes

✗

Fixed width containers that don't resize with zoom

✗

Missing viewport meta tag or incorrect viewport settings

✗

Using fixed pixel widths instead of percentages or clamp()

✗

Overflow: hidden on scrollable content

✗

No mobile-first breakpoints, only desktop optimization

Frequently Asked Questions

What zoom level should I test?
Minimum: 200%. Many users zoom 200-400%. Test at 200%, 300%, and 400% in browsers. Check at mobile breakpoints.
Should my design be mobile-first?
Yes, mobile-first responsive design naturally reflows better. Design for mobile, then enhance for larger screens. Easier to maintain.
Is horizontal scrolling ever acceptable?
At normal zoom, mobile horizontal scroll for data tables is acceptable. But at zoomed levels, it should reflow. Avoid horizontal scroll in general content.
How do I test reflow?
Browser DevTools: press Ctrl+Shift+M for mobile view. Zoom: Ctrl/Cmd ++. Or use https://www.a11yproject.com/posts/testing-at-200-zoom/

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides