Page scrolls sideways at this width

Why does it matter?

People who zoom in to read, and everyone on a phone, need text to wrap to the width of the screen. When one wide element pushes the page wider than the window, they have to scroll sideways on every line, which makes reading slow and tiring. WCAG asks for content to work at 320 pixels wide, which is what a desktop page looks like at 400% zoom.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

Checked in review mode's Whole page tab, at the current window width: a page that is wider than the window, so it scrolls sideways. The item names the first element that sticks out past the right edge, as a place to start; tables, code, video, embeds and boxes that scroll on their own are not blamed. For review. To test narrow screens and zoom, resize the window or zoom in and run the check again.

Check ID page-reflow, as shown in review mode and saved results.

How do I fix it in WordPress?

Find the element that sticks out (often a wide table, image, embed or fixed-width block) and let it shrink: max-width: 100%, or wrap tables so they scroll on their own. Then test with the window 320 pixels wide, or zoomed to 400%.

Example

.price-table { width: 960px; }

.price-table-wrap { overflow-x: auto; }
.price-table { width: 100%; }

How do I check the fix?

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.