Content wider than viewport on mobile: what it is, why it matters, and how to fix it
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
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;
}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