"Make this page work on phones": the one tag most prompts forget

"Make this page work on phones" is the request where the obvious-looking fix isn't the real one. Ask vaguely and you'll often get a media query that resizes one container — while the page still renders at desktop width on the phone and zooms out, leaving everything unreadably small. The actual fix is a single tag most prompts forget.

Here's the request three ways to Claude via Claude Code, with the real code. It's a gentler example than login or payments, but the same principle holds: the specific prompt gets the thing you actually needed.

The same request, three ways

make this page work on mobile

@media (max-width: 600px) {
  .container { width: 100%; }
}

make the page responsive: add the viewport meta tag and give it a mobile layout

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .grid { display: flex; gap: 1rem; flex-wrap: wrap; }
  .card { flex: 1 1 300px; }
  @media (max-width: 600px) {
    .grid { flex-direction: column; }
  }
</style>

make it mobile-first: base styles are the phone layout, use fluid units, tap targets at least 44px, no horizontal scroll, and add the desktop layout at a min-width breakpoint

/* Mobile-first: the base styles ARE the phone layout; widen later. */
* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; }         /* no sideways scroll */
.grid { display: grid; gap: 1rem; padding: 1rem; }
.btn { min-height: 44px; min-width: 44px; }     /* thumb-friendly */
img, video { max-width: 100%; height: auto; }   /* media never overflows */

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

The vague result isn't wrong so much as incomplete: a media query is real responsive CSS, but without the viewport tag the phone never enters the small-screen layout in the first place. It's the classic case of the model answering the letter of a request that left out the thing that mattered.

The constrained version flips the whole approach. Mobile-first means you write the phone layout as your default and only add complexity for wider screens with min-width. That tends to produce simpler, more robust CSS, because the hardest case (the small screen) is where you start, not where you patch.

If you remember one thing, make it the order of operations: viewport tag first, mobile-first layout second, polish third. Most "responsive" prompts jump straight to breakpoints and media queries, which is the polish step, and skip the two moves that actually decide whether the page is usable on a phone at all. Ask for those two by name and the rest tends to fall into place.

Before you ship it

Responsive isn't done until you've looked at it on a phone. Before you call it finished:

• Confirm the viewport meta tag is present — it's the single most common miss, and check it first.
• Open your browser's device mode, set the width to 375px (a small phone), and tap every button with a thumb.
• Watch for horizontal scroll — a page that slides sideways has something wider than the screen.
• Don't trust "looks fine on my laptop." That's the verify loop: check the case you didn't test.

When your AI shows you responsive CSS, skim it with the habits from How to read AI code without coding: is the viewport tag there, are tap targets big enough, does anything overflow? Three quick checks catch most of it, no CSS degree required.