Task

Allow zoom without forcing horizontal scrolling

Category: 
Appearance
Where: 
Style panel
Check as complete

People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.

A paragraph of text overflows off the screen.
❌ The div that contains this paragraph has a width of 800px. This causes text to overflow horizontally at a 400% zoom.
The same paragraph of text reflows into one legible column with no horizontal overflow.
✅  The div that contains this paragraph has a width of 80%, so content reflows on zoom and does not overflow horizontally

Here are some considerations to keep in mind to make sure reflow doesn’t force horizontal scroll.

Use relative units (like percentages and viewport width) to set width on text and images

Read more about size units and where to set them in the Webflow University lesson on Size Settings.

Check all breakpoints to make sure content doesn’t reflow horizontally

"Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimized layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page."

— W3, Reflow

Learn more about responsive design in the Webflow University lesson, Intro to Responsive Design.

Useful resources:

WCAG reference:

1.4.10 Reflow

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress