Website built with Claude Code or Cursor not responsive on mobile
Sites written with Cursor or Claude Code usually break on phones because the AI made only the page it was working on responsive, used fixed pixel widths or absolute positioning, or left out the viewport meta tag in a plain HTML or Vite project. Ask the AI to audit every page and shared component at phone widths, not just the current one, remove fixed widths, and check the viewport tag. Then test each page at 375px and on a real phone, because the AI cannot see the rendered result.
What you'll see
On a laptop the site looks polished. On a phone the page scrolls sideways, text is tiny or runs off the edge, a three-column grid stays three columns, tables push past the screen, and the navigation shows every link in one squashed row with no menu button.
Why it happens
1. The AI only fixed the page in front of it
When you ask for a page to be made responsive, the change lands in that file. Shared components like the header, footer, pricing table and forms, and every other page, keep their desktop-only layout unless you ask for them explicitly.
2. Fixed widths and layout shortcuts
Generated code often uses classes like w-[1200px], grid-cols-3 with no small-screen variant, absolute positioning for hero images, or flex rows that never wrap. All of them look right at 1440px and break at 390px.
3. The viewport meta tag is missing
Without a viewport tag with width=device-width and initial-scale=1, phones render the page at desktop width and zoom it out, so everything looks tiny. Next.js App Router adds it by default; hand-written HTML and some Vite setups may not have it.
4. Nobody looked at it on a phone
An AI editor reads and writes code; it does not see the rendered page unless you give it a screenshot or a browser tool. Layout bugs that are obvious on a phone can pass every test it runs.
How to fix it
- Open the site in Chrome, press F12, toggle the device toolbar and choose a 375px or 390px phone. Visit every page and note where it scrolls sideways, overlaps or has text you cannot read.
- Check the head of the page for a meta viewport tag. In a Vite or static project it belongs in index.html; in Next.js App Router, check you have not overridden the default viewport export.
- Give the AI the prompt below, naming every page and shared component so it does not stop at one file. In Claude Code, add a line to CLAUDE.md, or in Cursor a rule in .cursor/rules, saying every UI change must work from 360px up.
- Search the code for fixed pixel widths, w-screen or 100vw on elements inside padded containers, and grids without a mobile column count. Replace them with max widths and mobile-first classes.
- Wrap wide tables and code blocks in a container that scrolls horizontally on its own, so they do not widen the whole page.
- Screenshot any page that still looks wrong at phone width and paste the image into the chat, describing exactly which element is off.
- Test the finished site on a real phone in portrait and landscape, including opening and closing the mobile menu.
Prompt to paste into Cursor and Claude Code
Audit every page and every shared component (header, navigation, footer, hero, cards, pricing, forms, tables) for screens 360 to 414px wide. There must be no horizontal scrolling, body text at least 16px, tap targets at least 44px, a working mobile menu, images that scale down, and grids that collapse to one column on phones. Use responsive utility classes mobile-first, remove fixed pixel widths, confirm the viewport meta tag is present, and list every file you changed.
How to check it's fixed
- Every page at 375px and 390px wide in the device toolbar has no sideways scroll and no overlapping elements.
- On a real phone, the menu opens and closes, forms are usable with the on-screen keyboard, and text is readable without zooming.
What a QAlaunch scan shows for this
- Horizontal overflow at 390px in the phone screenshot and visual review.
- Text too small to read and tap targets too small or too close together.
- Overlapping or hidden elements and navigation that does not fit at phone width.
- The free scan covers the homepage only; a paid report checks up to 5 or 10 pages, which matters when the AI fixed only one.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why does the AI keep missing mobile issues?
It works from code and your instructions, not from what the page looks like. Unless you give it a screenshot, a browser tool or a standing rule about phone widths, it has no way to notice a layout that only breaks at 390px.
Should I ask it to rebuild the site mobile-first?
Usually not. A targeted audit of shared components fixes most of the site at once, because the header, footer and cards appear on every page. Rebuild only if the layout depends on absolute positioning throughout.
Is a Tailwind site automatically responsive?
No. Tailwind gives you responsive prefixes such as sm: and md:, but the layout only adapts where those prefixes are used. A grid-cols-3 without a smaller variant stays three columns on a phone.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the Cursor and Claude Code-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
More for Cursor and Claude Code: all Cursor and Claude Code fixes · Cursor and Claude Code testing
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Vercel Community: page not responsive on mobile screens · RapidDevelopers: making v0 apps responsive across screen sizes · MDN: viewport meta tag