RF-03 · Columns stacking
Check at 1280px / 400%, then 390px, then 320px
Side-by-side columns stacking
Three columns that read comfortably at desktop have about a hundred pixels each at 320. They have to become a single stack instead. A row that cannot stack is the most common source of sideways scrolling.
Look for
A horizontal scrollbar, a third column you have to scroll sideways to reach, or columns squeezed to one or two words per line.
A · Expected pass
Three columns at desktop, two at tablet, one at mobile.
Measure
Each column takes an equal share of the row rather than a pixel width, so the share shrinks as the row does. A minimum width decides when the row wraps.
Wrap
At tablet the minimum rises so only two fit per line and the third drops beneath. At mobile it rises again and each column takes the full width.
Stack
Reading order is preserved through both steps: left to right becomes top to bottom, and no column is ever off screen.
B · Known risk
Pixel-locked columns in a row that is told never to wrap.
Column one
This column is 340 pixels wide at every breakpoint. Three of them plus the gaps need a little over a thousand pixels, whatever the screen can offer.
Column two
The row is set never to wrap, so these three stay on one line and the line is simply wider than the viewport.
Column three
On a phone this third column sits entirely off screen. Reaching it needs a sideways scroll, which is the two-axis failure 1.4.10 exists to stop.