responsive-css

Responsive CSS: Mobile and Desktop at Once

Claude writes CSS for the desktop it's picturing and never checks the narrow viewport, so the same few things break every time: content overflows sideways, code blocks blow out the page, and text that's right on desktop is huge on a phone. Design for the small screen first and these mostly disappear.

Set the viewport, stop iOS inflating text

Without the viewport meta tag, mobile browsers render at a ~980px layout width and scale the result down, which is why everything looks oversized and mis-laid-out on a phone. This one line is non-negotiable on every page:

<meta name="viewport" content="width=device-width, initial-scale=1" />

And stop iOS from auto-enlarging text:

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

The flex/grid min-width: 0 rule, this fixes most overflow

This is the single most common cause of mysterious horizontal scroll. Flex and grid children default to min-width: auto, which means they refuse to shrink below their content's intrinsic width. So one long line, a URL, or a <pre> inside a flex/grid item pushes the whole layout wider than the screen. Set min-width: 0 on the child (or overflow: hidden) and it shrinks correctly.

.flex-child, .grid-child { min-width: 0; }   /* lets long content shrink instead of overflowing */

If you fix nothing else, fix this. It's behind the code-block overflow in most "works on desktop, scrolls sideways on mobile" pages.

Code blocks scroll, they don't overflow the page

A <pre> doesn't wrap and has no scroll affordance by default, so long lines expand the page. Make the block scroll inside itself, and never line-wrap code (wrapping changes what the code means). The parent needs min-width: 0 per the rule above, or this still overflows.

pre {
  overflow-x: auto;     /* scroll inside the block */
  max-width: 100%;
}
pre code { white-space: pre; }   /* keep code on its own lines, scroll horizontally */