In plain English
On a narrow screen, like a small phone or a zoomed-in desktop, content should stack into one readable column. Nobody should have to scroll left-and-right on every line to read a paragraph. That side-to-side scrolling is exactly what this rule forbids.
The magic width is 320 pixels (the same as your desktop zoomed to 400%). At that width, text and controls should reflow, not overflow.
Who this is for
- People who zoom in to read: at high zoom, a desktop becomes a narrow viewport, and reflow is what keeps it usable.
- Mobile shoppers on small phones.
- Anyone using a browser window that isn’t full width.
What “good” looks like
Use responsive CSS so the layout collapses gracefully instead of overflowing.
/* Good: fluid, reflows to one column on narrow screens */
.grid { display: flex; flex-wrap: wrap; }
.product-image { max-width: 100%; height: auto; }
/* Bad: fixed width forces horizontal scrolling */
.container { width: 1200px; }Test it: set your browser to 320px wide (or zoom to 400%) and read a product page. If you’re scrolling sideways to finish a sentence, it fails.
Where stores get it wrong
Fixed-width sections, wide tables that don’t wrap or scroll on their own, and oversized images that push the page wider than the screen. These force the whole page to scroll horizontally, a frequent entry on the common failures list.