By Partly fixable yourself. The viewport tag is quick, layout rewrites are not.
- How serious
- Medium
- Fix it yourself?
- Partly, some steps need a developer
- Typical cost
- €99–$990 for a single fix, or $1,500–$15,000 for many screens (prices)
- Top rated
- Afterbuild Labs · 10.0/10
What you see. On a phone the page scrolls sideways, text is tiny, buttons overlap, or the menu cannot be opened.
Why it happens
Builders show the preview in a wide desktop frame, so the AI designed for a wide screen. The code then has fixed pixel widths, side-by-side columns that never stack, wide tables, and menus that only open on hover. None of that works on a 375 pixel screen.
A missing viewport meta tag makes it worse. Without it, phones render the page at a virtual width of around 980 pixels and shrink it, so text becomes tiny and the responsive rules in your CSS never trigger. The MDN docs describe exactly this behaviour. Images without a max-width rule push the layout wider than the screen, which is where the sideways scroll comes from. Tailwind classes generated without the sm: or md: prefixes apply the desktop layout everywhere.
Fix it yourself
- In Chrome press F12 and click the phone icon to open device mode. Pick a phone size and reproduce the problem. Scroll sideways to find the widest element.
- Check the page's head for a viewport meta tag with
width=device-width, initial-scale=1. If it is missing, ask your builder to add it toindex.htmlor the root layout. - Ask your builder: Make every page work at 375 pixels wide. Replace fixed widths with max-width 100 percent and stack columns under 640 pixels.
- Give all images
max-width: 100%andheight: auto, and keep width and height attributes so space is reserved while they load. - Replace hover menus with tap menus and make buttons large enough to hit with a thumb. Test on a real phone in both orientations.
- Repeat for each screen you care about. The checklist item COST-03 covers phone load speed too.
When to get an engineer
Get help when more than a handful of screens are broken or when each AI fix breaks the desktop view. Send a screenshot per screen from a real phone and say which three screens matter most. A single screen is €99–$990. A full pass over an app with many screens falls under cleanup at $1,500–$15,000 and one to eight weeks, depending on how many pages there are.
Top-rated companies
Ranked by our score: published prices, scope of work, AI tools named, timing and a low-risk first step. How we score.
- 1Afterbuild Labs10.0/10Best for: A check before launchFree first step · from $49
- 2Redlab10.0/10Best for: A full rescue by one team that keeps buildingFree first step · from $490
- 3Vibe Code Rescue (Lev Arakelyan)9.0/10Best for: A one-off check and a cleanupFrom $299
Check these
Key pages load fast on a phone
Run PageSpeed Insights on the home page and the main app screen, on mobile.
Images are resized and compressed
Uploaded photos served at full size are a common cause of slow pages.
Dead code and duplicate components are removed
Search for components with near-identical names. Three versions of one button means three places to fix every bug.
Questions
Does the app need a separate mobile version?
No. One layout that adapts to the screen width is the normal approach and is what the fix steps describe.
Why did the preview on my phone look fine?
Builder previews often open in a desktop-sized frame or let you zoom. The live site runs in the real phone browser with none of that help.
Sources: MDN: viewport meta element; web.dev: responsive web design basics.