How to Prompt AI to Make a Website Mobile Responsive (Copy-Paste Prompt)

AI builders like v0, Lovable, Bolt, and ChatGPT usually design for the laptop screen they're previewed on. For a local business that's backwards: most of their visitors are on a phone, looking for a number to call or directions. Here's how to prompt the AI so the mobile version actually works.

Step 1: Check the site on a phone before you prompt anything

Find the specific problems first, because "fix mobile" gets vague results. Open the site on your phone and in your browser's device mode (F12, then the phone icon) at 360px, 390px, and 430px wide. Write down each issue: a menu that doesn't collapse, cards that don't stack, text running off the screen, a table you have to scroll sideways, a contact form that's hard to tap.

Step 2: Prompt AI to make the website mobile responsive with exact rules

Give the AI widths, layout behavior, and a guard rail for desktop. A Lovable user on Reddit put it simply: telling the builder "make this responsive for mobile, use flexbox and stack elements vertically under 768px width" works far better than "fix mobile" (thread). Here's a full prompt you can paste:

Do a mobile pass on this website. Test at 360px, 390px, and 430px wide; nothing may break at 320px.
- Single column on phones: stack all cards, columns, and image/text rows vertically.
- Collapse the nav into a menu button; keep the logo and a "Call now" button visible.
- Body text at least 16px, headings no bigger than about 36px on phones.
- Every button and link at least 44x44px. Make the main CTA buttons full width.
- Images, maps, and videos max-width 100%. No sideways scrolling, and don't hide it with overflow-x: hidden on the body.
- Only change styles for small screens. The layout at 1024px and wider must stay exactly the same.
List every change you made.

Step 3: Fix one page or one problem per prompt

Send small prompts and check each result. A Bolt user on Reddit said a single "make the page responsive" prompt never gave them what they wanted, so they go page by page and re-check desktop after each change (thread). For a stubborn issue, name the exact section and width, for example: "At 360px the pricing table is wider than the screen. Turn it into stacked cards on phones. Keep desktop unchanged." For more on iterating, see our guide to follow-up prompts for AI-generated websites.

Step 4: Prompt for the things local customers do on a phone

A responsive layout isn't enough; the phone version has to make calling and visiting easy. Ask for a sticky tap-to-call button, a tap-to-open address that launches maps, hours near the top, and a short contact form with large fields. These are what a local customer is looking for when they land on the site.

Step 5: Put mobile rules in your first build prompt

It's cheaper to build mobile-first than to patch it later. Add a line like "Design mobile-first: single column on phones, then expand to 2 columns on tablet and 3 on desktop" to your original prompt. If you use Locasly's copy-paste prompt for v0, Lovable, Bolt, or ChatGPT, paste that line at the end before you send it. Our AI website builder prompt guide covers the rest of the first prompt.

What Reddit users reported

• One r/smallbusiness owner found about 83% of their traffic was mobile, but mobile visitors converted at 2.1% vs 3.5% on desktop. The culprits: a contact form too small to tap, slow images, and a pricing table that scrolled sideways (thread).
• Another small business owner said about 65% of their traffic was mobile and mobile "barely converts," partly because people couldn't find the main button on a phone (thread).

Those are individual reports, not guarantees, but the pattern is consistent: the problems are usually forms, tap targets, images, and wide tables.

FAQ

Why does my AI website look bad on mobile?

AI builders often design for the desktop preview and use fixed widths, big headings, and side-by-side rows that don't stack. Specific prompts with exact widths fix most of it.

What's the best prompt to make a website mobile friendly?

One that names the widths (360 to 430px), says how sections should stack, sets minimum text and tap-target sizes, bans sideways scrolling, and tells the AI to leave desktop unchanged, like the prompt in Step 2.

Will mobile fixes break the desktop version?

They can. Always add "only change styles for small screens; keep desktop unchanged," and re-check the laptop view after every prompt.

Is browser device mode enough to test?

It's a good start, but Reddit users recommend checking on a real phone too, since device mode isn't always exact.