Why is my site not mobile-friendly?
The specific faults that break sites on phones — starting with the viewport tag and the tables nobody tested at 375 pixels.
Usually a missing or wrong viewport meta tag, fixed-width elements wider than the screen, tap targets too small, text below 16px, or a wide table forcing the whole page to scroll sideways. All are visible in a browser resized to 375 pixels.
Start with the viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">Without it, mobile browsers render at a virtual 980px and scale down, so your site appears as a tiny unreadable version of the desktop layout. This one line is the single most common cause.
Equally important is what must not be there:
<!-- Never do this -->
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">Disabling zoom is a WCAG failure. People with low vision need to zoom, and there is no good reason to prevent it.
The faults that break layouts
| Fault | Symptom | Fix |
|---|---|---|
| Fixed pixel widths | Horizontal scrolling on the whole page | Use max-width: 100% and relative units |
| Wide tables | Page scrolls sideways, or columns squash to unreadable | Wrap in overflow-x: auto, or restack rows as cards |
| Long URLs and code | Text overflows its container | overflow-wrap: anywhere |
| Unsized images | Content jumps as images load | Set width and height attributes |
white-space: nowrap on containers | Forces minimum width far beyond the screen | Scope it to buttons and labels only |
Grid with 1fr columns | Grid children refuse to shrink | Use minmax(0, 1fr) |
The last two are subtle and cause a surprising amount of damage. A nowrap applied broadly, or a grid without minmax(0, …), can force a page several times wider than the screen with nothing obviously wrong in the markup.
Touch and readability
- Tap targets at least 44×44px, with spacing between them. Adjacent small links are the most frustrating pattern on mobile.
- Body text at 16px minimum. Smaller triggers automatic zoom on focus in iOS Safari, which shifts the layout under the user.
- Do not rely on hover. There is no hover on touch. Anything only reachable by hovering is unreachable.
- Respect safe areas on devices with notches, using
env(safe-area-inset-*).
Testing it properly
- Resize your browser to 375px wide. Most faults are visible immediately.
- Check for horizontal scroll:
document.body.scrollWidth > window.innerWidthin the console. - Test on a real device. Emulators do not reproduce touch precision, or iOS Safari's specific behaviours.
- Test in landscape as well.
- Zoom to 200% and confirm nothing is lost.
Google indexes mobile-first, so the mobile rendering is the version being judged for ranking. But the stronger reason is that it is where most of your visitors already are.
What our audit reports about this
Every item below is measured directly, not inferred. Run it against your own site and the result names the exact rule or header responsible.
- Whether the viewport meta tag is present and correctly formed.
- Whether zoom is disabled — reported as an accessibility failure.
- Fixed-width elements and content wider than the viewport.
- Tap target sizes, base font size and hover-dependent interactions.
For agents and scripts, the same measurement is at
/api/v1/design?url=yoursite.com —
see the API documentation.
Related questions
Does mobile-friendliness affect ranking?
Yes. Google indexes the mobile version of your site, so mobile rendering is what gets evaluated. A site that works on desktop and breaks on mobile is judged on the broken version.
Do I need a separate mobile site?
No. Separate m-dot sites are legacy and create duplication and canonical problems. Responsive design is the standard approach.
What breakpoints should I use?
Base them on where your content breaks, not on device names. Resize slowly and add a breakpoint wherever the layout stops working. Device-based breakpoints go stale within a year.
Read next
Is my website accessible? How do I check?
What automated testing can and cannot tell you, the three manual tests worth more than any tool, and where to start on a real backlog.
ReadDoes page speed affect SEO?
Yes, modestly and as a tie-breaker. It affects whether people stay far more than it affects where you rank.
ReadWhat is a favicon and why does mine not show?
Caching, wrong sizes and missing formats — the three reasons, and the small set of files that actually covers every platform.
ReadWhat does a good 404 page need?
The right status code first, then a way out. Most 404 pages fail on the first one and nobody notices.
Read