---
title: "Looks fine on desktop, broken on phones"
description: "AI-built apps break on phones because of fixed widths and a missing viewport tag. How to find the overflowing element and what to ask the builder for."
url: https://whocanfixmyapp.com/problems/looks-fine-on-desktop-broken-on-phones
---

[Home](https://whocanfixmyapp.com/) / [Problems](https://whocanfixmyapp.com/problems) / [Screens and forms](https://whocanfixmyapp.com/problems#screens-and-forms)

# Looks fine on desktop, broken on phones

VC-55 · Any AI builder · Updated October 2026 · By [Nathaniel Kelley](https://whocanfixmyapp.com/authors/nathaniel-kelley)

Quick verdict

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](https://whocanfixmyapp.com/pricing))
- **Top rated**: [Afterbuild Labs](https://whocanfixmyapp.com/companies/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

1. 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.
2. 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 to `index.html` or the root layout.
3. 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.**
4. Give all images `max-width: 100%` and `height: auto`, and keep width and height attributes so space is reserved while they load.
5. Replace hover menus with tap menus and make buttons large enough to hit with a thumb. Test on a real phone in both orientations.
6. Repeat for each screen you care about. The checklist item [COST-03](https://whocanfixmyapp.com/checklist) 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](https://whocanfixmyapp.com/methodology#score).

- 1 · [Afterbuild Labs](https://whocanfixmyapp.com/companies/afterbuild-labs) · **10.0**/10 · Best for: A check before launch · Free first step · from $49
- 2 · [Redlab](https://whocanfixmyapp.com/companies/redlab) · **10.0**/10 · Best for: A full rescue by one team that keeps building · Free first step · from $490
- 3 · [Vibe Code Rescue (Lev Arakelyan)](https://whocanfixmyapp.com/companies/vibe-code-rescue-lev-arakelyan) · **9.0**/10 · Best for: A one-off check and a cleanup · From $299

[All 79 companies, ranked](https://whocanfixmyapp.com/directory#ranking)

## Check these

COST-03 · Medium

Key pages load fast on a phone

Run PageSpeed Insights on the home page and the main app screen, on mobile.

COST-04 · Medium

Images are resized and compressed

Uploaded photos served at full size are a common cause of slow pages.

CODE-03 · Medium

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element); [web.dev: responsive web design basics](https://web.dev/articles/responsive-web-design-basics).

**Same category**

- [CORS error only on the live site](https://whocanfixmyapp.com/problems/cors-error-only-on-the-live-site)
- [Hydration error after deploy](https://whocanfixmyapp.com/problems/hydration-error-after-deploy)
- [Form submits but nothing happens](https://whocanfixmyapp.com/problems/form-submits-but-nothing-happens)
- [Images and files not loading after deploy](https://whocanfixmyapp.com/problems/images-not-loading-after-deploy)
- [App is stuck on a loading spinner](https://whocanfixmyapp.com/problems/stuck-on-a-loading-spinner)

[All screens and forms problems](https://whocanfixmyapp.com/problems#screens-and-forms)

**Run every check**

The [production checklist](https://whocanfixmyapp.com/checklist) has all 24 checks with a verdict.