The short verdict
- Most generated sites are designed at desktop width and squeezed down afterwards.
- The same six problems turn up again and again, and most are visible in ten minutes.
- Check on a real phone, not just a resized browser window.
01Why it happens
When you prompt a builder, you look at the preview on your laptop. The tool optimises for what you look at. The mobile layout is whatever falls out when the same columns are stacked, and nobody reviews it as carefully, because the person prompting is not holding a phone.
Then the site gets edited through more prompts. Each change is checked at desktop width, and small mobile regressions pile up. That is how sites end up “breaking in places on mobile” with nobody quite sure when it started.
02The six usual suspects
1. Sideways scroll
One element is wider than the screen, so the whole page wobbles left and right when you scroll. The cause is usually a fixed-width image, a long word or URL, a decorative blob positioned off-canvas, or a row of logos that does not wrap.
2. Headlines that clip or break badly
A 72-pixel headline that looked confident on desktop becomes four lines of three words on a 375-pixel phone, or gets cut off entirely. Type needs its own sizes per breakpoint, or a fluid scale that shrinks with the screen.
3. The menu that will not behave
The hamburger opens but the page behind it still scrolls. Or it will not close after you tap a link. Or it sits underneath the hero animation. Menus get less testing than anything else, because on desktop they do not exist.
4. Tap targets that are too small
Footer links stacked 12 pixels apart, icon buttons at 24 pixels square. Apple’s guidance is 44 by 44 points for anything a finger needs to hit. Below that, people tap the wrong thing.
5. Cards that stack in the wrong order
A two-column section with image left and text right stacks fine. The next section, image right and text left, stacks with text first. Now the page alternates for no reason. Order should be set on purpose at each breakpoint.
6. The 100vh hero
A hero set to full viewport height looks great until the phone’s address bar shows and hides, and the content jumps. On some phones the button at the bottom of the hero sits under the browser’s toolbar. Newer viewport units, like dvh and svh, fix most of this.
03The ten-minute check
You do not need a developer for this. You need your own phone and one other.
- Swipe sideways on every page. If the page moves, something is too wide.
- Open and close the menu five times. Tap a link from it, rotate the phone, then try again.
- Fill in every form. Check the keyboard type: email fields should bring up the @ key.
- Read every headline. Look for single words stranded on their own line.
- Turn the phone sideways. Landscape is where full-height heroes and fixed headers fall apart.
- Try a small phone. If yours is large, borrow an older or smaller one. 360 to 375 pixels wide is still common.
“Desktop is where the site gets designed. The phone is where most visitors actually meet it.”
04What fixing it involves
A few of these are one-line fixes. Others point to a deeper issue: a layout built from fixed pixel widths instead of a system that adapts. If your check turns up two or three problems, they can usually be patched. If every page has several, the structure underneath is the real problem, and patching one breakpoint tends to break another.
05Questions people ask
Is a resized browser window good enough for testing?
It catches layout problems, but not the address bar, the on-screen keyboard, touch behaviour or real font rendering. Use it for a first pass, then check on a real phone.
Which screen widths should I test?
Around 360, 390 and 430 pixels for phones, 768 and 1024 for tablets, then desktop. The gaps between those widths are where things break, so drag slowly between them too.
Can I fix mobile issues by prompting the builder again?
Sometimes. The risk is that a prompt aimed at mobile also changes desktop, so check both after every change.
What if I find problems on every page?
That usually means the layout system needs fixing rather than each page. Send us the link and we will tell you which it is.
