Test responsive behavior across every width

You checked the page at desktop, tablet and phone, and all three looked fine. Then someone zooms in to read, or narrows the window, and the order page breaks.

Here's the bakery's order page at the three reference widths: twelve-eighty, seven-sixty-eight and three-seventy-five. All three look fine, and they're good frames for screenshots and review. But people use every width in between and below. Three checks tell you about three points on a line, and nothing about the rest of it.

So keep both, for different jobs. The reference widths stay for screenshots and review. QA sweeps the whole range, down to three hundred and twenty. That number isn't about phones. WCAG's reflow rule uses three-twenty CSS pixels because that's what a twelve-eighty window becomes at four hundred percent zoom.

Use your browser's developer tools, or just drag the window narrower. Start at your widest width and go slowly, watching the page rather than the number. Stop at the first thing that breaks. At three hundred and sixty-two pixels, Morning buns is squeezed onto two lines, a word on each, by the price and the buttons beside it. Write down the width and the element, then find the rule behind it. This one says the name, the price and the buttons share one row, at any width. Three-seventy-five was fine, so no screenshot ever showed it.

Know what you're looking for. The page scrolls sideways. A line holds a word or two. Text spills out of its box. Buttons crowd together. An image stretches, or crops out its subject. Sweep with the real copy at its longest, and sweep up past your widest width too: a paragraph running the full width of a big screen is broken as well.

Here's a break recorded the same way for another fictional client, a garden designer. At one thousand and twelve pixels, the services grid still has three columns, and every title wraps to four lines. The last line is the rule that put it there.

The tempting fix is one more breakpoint at three-sixty-two. It works at that width, for these loaves. Then Morning buns go up to twelve fifty, and the row breaks again at three-seventy-three. So change the rule. When the price and the buttons don't fit beside the name, they move under it, at any width. Then sweep the whole range again, because changing a rule moves things. This time the row holds at every width, all the way down to three-twenty. And update the responsive rules you wrote before the build, so the next page follows the fixed one.

The garden designer's grid got the same treatment. Instead of another breakpoint, the grid holds as many columns as can each be at least eighteen rem wide, and the min with a hundred percent stops a card overflowing on the narrowest screens.

Screenshots at three widths are for review. QA is the whole range. When something breaks, find the rule that produced it and change that.