Copy-paste prompts to fix responsive design with AI

The prompts that fix responsive design are specific: one problem, the exact viewport width, the element that breaks, and two guard rails ("keep desktop unchanged", "don't hide overflow on the body"). Below are 12 copy-paste prompts for Claude, ChatGPT, Codex, Cursor, Lovable, v0 and Bolt, each with a one-line "use when". Replace the bits in [brackets] with your own details.

Four rules before you paste

1. Always give the exact width. "On mobile" means nothing to an AI. "At 360px wide" gives it a number to design and test against. These widths come from real devices:

Most prompts below use 360, 402 and 440; if a fix works there, it almost always works in between.

2. One problem per prompt. Five bugs in one message get five half-fixes.

3. Keep the guard rails. "Keep the desktop layout unchanged" stops the AI rewriting base styles. "Don't use overflow-x: hidden on html or body" stops it hiding the bug instead of fixing it.

4. Check again at the same widths, then on a tablet and a laptop, because mobile fixes love to break desktop.

Claude Code, Codex and Cursor edit your files directly; Lovable, v0 and Bolt take the prompt in their chat; a plain ChatGPT or Claude chat also needs the relevant file pasted in. The full workflow is in make your AI website mobile friendly.

The prompts

1. A general mobile pass

Use when: you've never looked at the site on a phone and want the big stuff fixed first.

Do a mobile pass on this site. Target widths: 360px, 402px and 440px, and nothing may break at 320px. At each width: no sideways scrolling, no text closer than 16px to the screen edge, no tap target smaller than 44×44px. Look for fixed widths or min-widths over 320px, rows of cards that don't stack, images, videos and iframes without max-width: 100%, headings bigger than about 40px on phones, height: 100vh sections, nav links that don't collapse and wide tables. Only add or change styles for small screens: the layout at 1024px and wider must stay exactly as it is. Don't use overflow-x: hidden on html or body. List every change, file by file.

2. Sideways scrolling (SPILLING)

Use when: the page wobbles sideways on a phone, or doesitfit shows SPILLING +Npx.

Fastest: click the SPILLING sticker in doesitfit and press Copy fix prompt. It fills in the device, its exact CSS size, the overflow in pixels, the element sticking out and a way to check the fix (Show me where outlines that element). To write it yourself:

On a [Galaxy S25, 360×780] CSS px, my page is [48]px wider than the screen, so it scrolls sideways. The element sticking out is [section.pricing div.grid]. Find what makes it wider than [360]px (a fixed width or min-width, 100vw, an image or iframe without max-width, a long URL, a flex item missing min-width: 0, a grid column that needs minmax(0, 1fr)) and fix that cause. Don't hide it with overflow-x: hidden on html, body or a wrapper. Keep the desktop layout unchanged. At [360]px wide, document.documentElement.scrollWidth must equal [360] when you're done.

The usual causes, one by one: how to fix horizontal scrolling on mobile.

3. Cramped text (TIGHT)

Use when: text touches the screen edge, or doesitfit shows TIGHT (text within 8px of the edge, or cut off by its own box).

At [402]px wide, text in [the header, the testimonial cards and the footer] sits closer than 8px to the screen edge. Give the main page containers one consistent side padding: 16px on phones, growing to about 32px on wide screens (padding-inline: clamp(16px, 5vw, 32px), or px-4 sm:px-6 lg:px-8 in Tailwind). Full-width sections keep their background edge to edge but put their text in a padded inner container. Where text is cut off by white-space: nowrap or a fixed width, let it wrap. Keep the desktop layout unchanged.

More patterns in mobile padding that works.

4. Hero too big on small phones

Use when: the headline stacks one word per line, or the main button is below the first screen.

On a 360×780 phone the hero doesn't fit: the h1 [wraps to five lines] and the main button is below the first screen. Make the h1 scale with clamp() including a rem part, so it's about 32–36px at 360px wide and keeps its current size at 1280px and up. Reduce the hero's vertical padding on phones, stack the buttons full width below 480px, and replace height: 100vh or h-screen with min-height: 100svh (100vh first as a fallback). With Safari's toolbars showing, the main button must be visible without scrolling on a 402×874 iPhone 17 Pro, which leaves about 718px for the page.

5. Nav that doesn't collapse

Use when: header links wrap into two rows, overlap the logo or push the page sideways.

Between [360] and [834]px wide my header links don't fit. Below [1024]px, replace them with a disclosure menu: a real button labelled Menu, with aria-expanded and aria-controls, at least 44×44px, placed right before the list. The list opens below the header, one link per row, each at least 44px tall. Hide it with display: none when closed; close it with Escape (focus back on the button), when a link is chosen and when a tap lands outside. No role="menu". Keep [Sign up] visible outside the menu and leave the desktop nav unchanged.

The patterns and code are in mobile menus that work.

6. Wide tables

Use when: a pricing, comparison or data table pushes the page sideways.

The [plan comparison] table on [/pricing] is wider than a 360px phone. Wrap it in a div with overflow-x: auto, tabindex="0", role="region" and an aria-label, so the table scrolls inside its box and keyboard users can scroll it too. Keep the first column visible while scrolling (position: sticky; left: 0; with a background). If the table has three columns or fewer, show each row as a stacked card below 640px instead. Keep the text at least 14px and the desktop table unchanged.

Which pattern fits which table: responsive tables on mobile.

7. Images and embeds

Use when: images stick out, look blurry on phones, or text jumps as they load.

Check every img, video and iframe. Images and videos need width and height attributes matching their real aspect ratio, plus max-width: 100% and height: auto in CSS. Iframes (YouTube, maps) need width: 100% and a CSS aspect-ratio, because their width and height attributes don't set a ratio. Large photos get srcset and sizes, so a 402px-wide iPhone at 3× picks a file around 1206px wide, not the 2400px desktop one. Lazy-load images below the first screen, never the hero. Keep desktop unchanged.

Background: responsive images with srcset and sizes and stopping layout shift on mobile.

8. 100vh sections cut off

Use when: a full-screen section hides its bottom behind the browser's toolbar, or jumps when you scroll.

Find every full-height section: 100vh, h-screen, min-h-screen, -webkit-fill-available or a JavaScript --vh variable. Content sections like the hero get min-height: 100vh followed by min-height: 100svh (Tailwind: min-h-svh). App-style layouts where an inner panel scrolls get height: 100vh followed by height: 100dvh (Tailwind: h-dvh). Remove the old workarounds once replaced. Check on a 402×874 iPhone 17 Pro, where about 718px is visible on first load.

Why: 100vh on mobile is broken.

9. iPhone zooms into form fields

Use when: tapping a field on an iPhone zooms the whole page in.

On iPhones, Safari zooms in when I tap [the email and search fields]. Make the font size of every input, select and textarea at least 16px on phones (font-size: max(16px, 1rem) works). Don't add maximum-scale=1 or user-scalable=no to the viewport tag: people must still be able to pinch-zoom. Keep the desktop look of the forms unchanged.

The full story: why iPhone zooms in on your form.

10. Phones on their side

Use when: the site looks broken when someone rotates their phone.

My site breaks on phones held sideways. At 874×402 (an iPhone 17 Pro in landscape, about 337px tall once Safari's bars are in) [the sticky header covers a third of the screen and the hero button is cut off]. Add rules inside @media (orientation: landscape) and (max-height: 500px): make the header shorter or non-sticky, let hero sections use min-height: auto, and make menus and modals scroll inside themselves when they're taller than the screen. Portrait phones, tablets and desktop must not change.

More: landscape on phones.

11. Notch, Dynamic Island and home indicator

Use when: you use viewport-fit=cover and content hides under the Dynamic Island or the home indicator.

My viewport tag uses viewport-fit=cover, and on iPhones [text slides under the Dynamic Island in landscape and the fixed bottom bar sits on the home indicator]. Use env() safe areas: side padding on the main containers of max(16px, env(safe-area-inset-left)) and max(16px, env(safe-area-inset-right)), and padding-bottom: calc(12px + env(safe-area-inset-bottom)) on fixed bottom bars and cookie banners. Backgrounds stay edge to edge; only the content moves in. Screens without a notch must look the same as now.

The details: safe areas on iPhone.

12. Check with doesitfit, fix, check again

Use when: you work in Claude Code, Codex or Cursor and want the AI to check its own work.

Connect the doesitfit MCP server once. The online server checks public sites; for localhost, the local version runs on your computer and needs Node.js and Chrome, Edge, Brave or Chromium:

# Claude Code
claude mcp add doesitfit-local -- npx -y https://doesitfit.lol/downloads/doesitfit-mcp-1.0.0.tgz

# Codex
codex mcp add doesitfit-local -- npx -y https://doesitfit.lol/downloads/doesitfit-mcp-1.0.0.tgz

Setup for the other apps, and the online address, is on /connect. Then:

Use doesitfit to check localhost:3000[/pricing] on Galaxy S25, iPhone SE, iPhone 17 Pro, iPhone 17 Pro Max, iPad Air 11 and MacBook Air 13. For every screen that isn't FITS, look at the element it names and fix the cause in the code, not with overflow-x: hidden on html or body. Check again after each fix and stop when every screen says FITS, or after five rounds. Then list what you changed and confirm the MacBook Air 13 screenshot looks the same as before.

Each check covers up to six screens. More in check your website from Claude, ChatGPT or Codex.

When the fix makes it worse

Paste one of these as a follow-up:

The short version

• One problem per prompt, with the width (360, 402, 440), the element and the pixels.
• Every prompt ends with "keep desktop unchanged" and "no overflow-x: hidden on html or body".
• Let doesitfit's Copy fix prompt or the MCP report fill in the numbers for you.
• Check again at the same widths, then a tablet and a laptop, then a real phone.