Content wider than viewport on mobile — the fix
Some elements on this page extend beyond the viewport width on mobile devices, causing horizontal scrolling. This creates a frustrating user experience and signals that the page is not properly responsive.
Where this fits: mobile in SEO
Google indexes the mobile version of your site — desktop is the afterthought, not the other way round. Mobile issues (missing viewport, tap targets too close, content wider than the screen, intrusive interstitials) directly gate rankings for every query. With most traffic on phones, a mobile problem is not a subset of your audience — it is your audience.
Why content wider than viewport on mobile hurts your rankings
Horizontal scrolling on mobile is one of the most common mobile usability failures flagged by Google's Mobile-Friendly Test and Google Search Console. Pages with this issue are considered non-mobile-friendly, which directly impacts rankings in mobile search results under Google's page experience system.
This is a high-severity issue: it directly suppresses rankings or click-through on the pages it affects. It belongs in your current sprint, prioritised by how many pages carry it.
How to fix it
Identify elements causing horizontal overflow. Common culprits include fixed-width images, tables, iframes, pre-formatted text blocks, and absolutely positioned elements. Use CSS max-width: 100% on images and media, overflow-x: auto on tables, and responsive design patterns throughout. Test with Chrome DevTools device emulation.
/* Prevent images from overflowing */
img, video, iframe {
max-width: 100%;
height: auto;
}
/* Responsive tables */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}Mobile best practices
- Ship a correct viewport meta tag on every page — it is one line and it gates everything.
- Keep tap targets ≥ 44×44px with real spacing between them.
- Never let content overflow the viewport horizontally.
- Test on a real mid-range phone over 4G, not just desktop devtools.
- Avoid intrusive interstitials — Google demotes pages that greet mobile users with a wall.
The full library: SEO best practices, by category.
Frequently asked questions
What does "Content wider than viewport on mobile" mean?
Some elements on this page extend beyond the viewport width on mobile devices, causing horizontal scrolling. This creates a frustrating user experience and signals that the page is not properly responsive.
Why does content wider than viewport on mobile matter for SEO?
Horizontal scrolling on mobile is one of the most common mobile usability failures flagged by Google's Mobile-Friendly Test and Google Search Console. Pages with this issue are considered non-mobile-friendly, which directly impacts rankings in mobile search results under Google's page experience system.
How do I fix content wider than viewport on mobile?
Identify elements causing horizontal overflow. Common culprits include fixed-width images, tables, iframes, pre-formatted text blocks, and absolutely positioned elements. Use CSS max-width: 100% on images and media, overflow-x: auto on tables, and responsive design patterns throughout. Test with Chrome DevTools device emulation.
How serious is this issue?
This is a high-severity issue: it directly suppresses rankings or click-through on the pages it affects. It belongs in your current sprint, prioritised by how many pages carry it. It belongs to the mobile family of checks.
How do I find every page affected by this on my site?
Run a free Dr Urls audit: it crawls your site, detects content wider than viewport on mobile on every affected page, shows example URLs, and generates a ready-to-use fix task. Re-scan after fixing to verify the issue is gone.
Does your site have this issue?
A free Dr Urls audit crawls your site, finds every page affected by content wider than viewport on mobile, and hands you a ready-made fix task.
Check my site free