Assistants like Cursor, Copilot and Claude often produce layouts that look right on a laptop and break on a phone. Check ten things on a 390px-wide frame: horizontal overflow, text wrapping, tap target size, fixed widths, navigation, tables, forms, images, full-height sections and landscape.
The checklist
- Horizontal scroll: if the page scrolls sideways, something has a fixed width or an unbroken string.
- Text: long words, URLs and headings should wrap; check small text stays readable.
- Tap targets: buttons and links at least 44 by 44 CSS pixels (Apple) or 48 (Material), with space between them.
- Fixed widths: look for w-[600px], width: 800px or min-width values in generated code.
- Navigation: a full navigation bar should collapse into a menu on narrow screens.
- Tables: wrap them in a scroll container or turn rows into cards.
- Forms: inputs at least 16px so iOS Safari does not zoom in on focus; labels visible.
- Images and video: max-width: 100% and sensible aspect ratios.
- Full-height sections: use dvh instead of vh.
- Landscape: flip the device and check headers and fixed bars.
Make it a habit
The cheapest way to catch these is to keep a phone frame open next to the code and the chat. When the assistant changes a file, the preview updates and you see the result immediately instead of after the fact.
Ask the assistant to fix it properly
When you find a problem, tell the assistant the viewport width and what breaks, for example: “at 390px the nav overflows; collapse it into a menu below md”. Specific viewport numbers lead to better fixes than “make it responsive”.
Frequently asked questions
- Why do AI-generated layouts break on mobile?
- Assistants tend to design for wide screens first and use fixed widths or large spacing. Narrow screens expose overflow, wrapping and navigation problems.
- What width should I test?
- Start with 390px wide, a common phone width, then try 360px and landscape.
- How big should tap targets be?
- Apple recommends at least 44 by 44 points and Material Design recommends 48 by 48 density-independent pixels.
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · The viewport meta tag explained: what it does and the one line you need · 100vh on mobile: why it overflows and how to fix it with dvh · Safe areas in CSS: avoid the notch and the Dynamic Island · Tailwind breakpoints vs real phones and tablets · How to make a phone mockup screenshot of your website (free)