Make your AI website mobile friendly (prompts that work)

To make an AI-built website mobile friendly, check it on real phone widths, tell your AI exactly what breaks (the width, the element, how many pixels), give it a focused fix prompt, then check again. The loop takes minutes, and it works the same in Claude, ChatGPT, Cursor, Lovable, v0 and Bolt, because the hard part isn't the tool. It's the prompt.

"Make it responsive" is the prompt everyone tries first. It's also why so many AI fixes shrink everything, hide half the page or quietly break desktop. Here's the workflow that works instead.

Step 1: Check it on real screen sizes

You can't fix what you haven't seen, and a single phone preview shows you one size. Phones come in a handful of widths that matter:

If it works at 360, 390–402 and 430–440, it almost certainly works on the phones in between. Here are StatCounter's worldwide phone screen sizes for August 2026:

Source: StatCounter Global Stats, worldwide, August 2026; bot-traffic artifacts (800×600, 1366×1366, 1280×1200) and phone sizes misfiled as desktop removed.

Take the 414×896 row with a pinch of salt: it jumped during 2026, likely because Safari 26 reports a fixed screen size to known fingerprinting scripts, so it isn't all real iPhone 11s.

There are two quick ways to check all of these at once:

• In the browser: paste your address, or your localhost, into doesitfit. Every screen gets a sticker: FITS, TIGHT (text squeezed against the edge) or SPILLING +Npx (the page is N pixels wider than the screen and scrolls sideways).
• From your AI chat: connect the doesitfit MCP server once (setup at /connect) and ask Claude, ChatGPT, Codex or Cursor something like "does my site fit on an iPhone 17 Pro and a Galaxy S25?". The online server checks public sites; for localhost, there's a local version you run with npx. The AI gets a verdict per screen, the exact element that sticks out and screenshots with the problem outlined. More in check your website from Claude, ChatGPT or Codex.

Step 2: Give the AI exact numbers

AI tools are great at fixing a specific bug and mediocre at "make it better". Compare:

make the site mobile friendly

with:

At 360px wide (Galaxy S25), the pricing section is 48px wider than the screen. The element sticking out is div.pricing-grid. Fix the cause without changing the desktop layout.

The second one names the width, the element and the size of the problem. The AI can go straight to the right file and the right line, and you can check whether it worked.

Where to get the numbers:

• doesitfit: the sticker gives the width and pixels (SPILLING +48px). Click it and press Show me where to see the element outlined, or Copy fix prompt to get a ready-made prompt with all of it filled in.
• DevTools: the console snippet in how to fix horizontal scrolling on mobile lists every element past the screen edge.
• The MCP server: your AI gets the numbers itself, so you can just say "fix what doesitfit found".

One problem per prompt works better than five. Fix the biggest spill first; it often takes smaller ones with it.

Step 3: Copy-paste prompts

Replace the bits in [brackets]. In Cursor, Claude Code or Codex the AI edits your files directly, so ask it to show you what it changed. In Lovable, v0 or Bolt, paste the prompt into the chat. In a plain ChatGPT or Claude chat without access to your code, paste the relevant file along with the prompt.

A general mobile pass

Use this once, early, before you chase individual bugs.

Do a mobile pass on this site. It must work at 360px, 390–402px and 430–440px wide without horizontal scrolling. Build mobile-first: base styles for phones, then min-width breakpoints for larger screens. Check for fixed widths over 320px, images and iframes without max-width: 100%, rows of cards that don't stack, headings that are too big for a phone, nav links that don't collapse into a menu, 100vh sections, and buttons or links smaller than 44×44px. Keep the desktop layout exactly as it is. List every change and why.

Fix sideways scrolling

At [360]px wide ([Galaxy S25]), the page is [48]px wider than the screen and scrolls sideways. The element sticking out is [selector]. Find why it's too wide (fixed width, 100vw, image or iframe without max-width, long word or URL, table, flex item without min-width: 0, grid column that needs minmax(0, 1fr)) and fix that cause. Don't use overflow-x: hidden on html, body or a page wrapper to hide it.

Fix cramped text

On phones, text in [the hero and the footer] is closer than 8px to the screen edge. Give all text sections the same side padding: at least 16px on phones, growing to about 32px on larger screens (padding-inline: clamp(16px, 5vw, 32px), or px-4 sm:px-6 lg:px-8 in Tailwind). Full-width sections keep their background but put the text in a padded container. Let text that's cut off by nowrap or ellipsis wrap instead.

The why and the patterns are in mobile padding that works.

Fix the hero on small phones

On a 360×780 phone, the hero heading is too big and the main button is pushed off the first screen. Make the h1 scale with clamp() using a rem part (about 32–36px at 360px wide, current size on desktop). Replace any 100vh or h-screen with min-height: 100svh, keeping 100vh as a fallback. Stack the buttons full-width below 400px. The main button must be visible on a 402×874 iPhone with Safari's toolbars showing.

Why 100vh misbehaves on phones: 100vh on mobile is broken.

Fix the navigation

The header nav doesn't fit on phones. Below 768px, replace the row of links with a Menu button (aria-expanded, aria-controls, at least 44×44px). The menu opens below the header, full width, one link per row, each at least 44px tall, and closes with Escape, when a link is tapped and when the button is pressed again. Hide it with display: none when closed, not by moving it off-screen. Keep the desktop nav unchanged.

Step 4: Check again

Re-run the same check at the same widths. Then check wider screens too: a tablet like the iPad Air 11″ (820px), a MacBook Air 13″ (1470×956) and a Windows laptop at 1536×864, because mobile fixes love to break desktop.

If a screen still says SPILLING, give the AI the new numbers. It's normal to need two or three rounds. When everything fits, do one last pass on a real phone for things only a thumb finds: menus, forms, tap targets. How to open localhost on your phone shows how.

Step 5: Watch for these AI-fix pitfalls

AI tools have a few favourite "fixes" that make things worse. Read the diff and push back on these:

• overflow-x: hidden on html or body. It stops the wobble by cutting off whatever sticks out, and it can break sticky headers. It hides the bug instead of fixing it.
• Breaking desktop. Mobile fixes should add rules for small screens or make things flexible, not change the base layout. In Tailwind, a class without a prefix (flex-col) applies to every size, so the desktop version needs its own prefix (md:flex-row). If desktop changed and you didn't ask for it, say so.
• Hiding content on phones. hidden md:block on a pricing table or feature list "fixes" the layout by deleting information. Phone visitors need it too.
• Shrinking everything. Body text at 12px and buttons at 28px technically fit, but nobody can read or tap them. Keep body text around 16px.
• Blocking zoom. maximum-scale=1 or user-scalable=no in the viewport tag, usually added to stop iPhones zooming into form fields. Chrome on Android honours it by default and stops people pinch-zooming. Set form inputs to a 16px font size instead; iOS Safari doesn't zoom into those.
• Magic numbers for one phone. @media (max-width: 393px) fixes one iPhone and misses the Galaxy next to it. Use flexible layouts and a few standard breakpoints.
• Piles of !important. A sign the AI is fighting its own CSS. Ask it to find the rule that's winning and change that instead.

For the full list of what AI builders get wrong, see 10 responsive mistakes in AI-built websites. And before you launch, run through the vibe coding launch checklist.

The loop, in one line each

1. Check real widths: 360, 390–402 and 430–440px, plus a tablet and a laptop.
2. Write down the width, the element and the pixels.
3. Paste one focused prompt with those numbers and "keep desktop unchanged".
4. Check again, everywhere.
5. Reject band-aids: overflow-x: hidden, hidden content, tiny text, blocked zoom.

Browse every size in /devices, or start with the iPhone, Samsung Galaxy and Google Pixel lists.