Responsive design used to mean a stack of breakpoints and a lot of duplicated CSS. Modern layout tools mean most of it happens automatically if you stop fighting them.

Start narrow

Design at 320px first. It forces the priority decisions — what matters most, what can be hidden, what can wait. Then let it expand.

Going the other way, you design something wide and then spend an afternoon working out what to cut, which is a harder problem and produces worse results.

Let the browser do it

A grid that reflows without any breakpoints at all:

css
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

Cards fit as many per row as will fit at 260px minimum, and reflow on their own. No media queries, works at every width including ones you never tested.

Similarly: max-width in ch units for text, clamp() for font sizes that scale with the viewport within limits, gap instead of margins for spacing between items, and flexbox with flex-wrap for anything in a row.

Add breakpoints where it breaks

Not at device sizes — those change and there are too many. Resize your browser slowly, and add a breakpoint at the width where your layout actually looks wrong. That's usually two or three, not six.

The things that catch people

Horizontal scroll. Something is wider than the viewport — usually a fixed-width element, a long unbroken string, or a table. Find it with outline: 1px solid red on everything.

Tables. They don't reflow. Wrap them in a container with overflow-x: auto so the table scrolls, not the page.

Tap targets. 44px minimum, with space between. Links in a tight list are unusable with a thumb.

Viewport height on mobile. 100vh doesn't account for the browser's own chrome. Use 100dvh.

responsive-fix.txt
Make this work from 320px up: <paste>

- No horizontal scroll at any width. Tell me what was causing it.
- Use auto-fit grid or flex-wrap rather than a pile of breakpoints.
- Tap targets at least 44px with spacing.
- Tables scroll inside their own container.
- Font sizes with clamp() rather than fixed pixels.

List which changes were structural and which were cosmetic, and what
I should check by hand on a real phone.

Test with your browser's device emulation, then on an actual phone. Emulation misses touch targets, real font rendering, and how much of the screen the keyboard eats.