Website wider than the screen on mobile? How to find and fix horizontal scroll

Updated October 17, 2026 · Covers: The page is wider than the screen

What it means

Something on your page is wider than the phone's screen. Instead of fitting, the page gets a horizontal scroll: visitors can drag it sideways, there is empty space on the right, and the content often wobbles left and right while they scroll down. Text near the right edge may be cut off entirely.

Usually a single element causes it: one image, one table, one long URL or one container with a fixed width. Find it and the whole page snaps back into place.

Why it matters

Sideways scrolling is one of the most noticeable signs that a site wasn't built for phones. People scroll vertically with their thumb and rarely expect to pan sideways, so a page that drifts feels broken. If the overflow is large, the browser may also zoom the page out on load to fit the extra width, which makes all the text smaller.

It also fails a basic accessibility requirement. WCAG 2.2 success criterion 1.4.10 (Reflow) asks that content work at 320 CSS pixels wide without scrolling in two directions, except for things like maps, data tables and diagrams that genuinely need two dimensions.

How MobileCheck finds it

MobileCheck compares the page's scroll width with the device's viewport width. If the page is wider, it looks for the deepest elements that reach the right edge of the page and lie past the edge of the screen, and highlights them on the screenshot with how far each one sticks out, for example "sticks out by 84px". Fixed-position and hidden elements are ignored, because they don't create a scrollbar.

The check runs in the normal view, again with large text (150%), and again with the mobile menu opened. A layout that fits at default text size can overflow when people enlarge their font, so a problem that appears only in the large-text scenario usually means a fixed width somewhere around text. See the large text guide for that case.

How to find the culprit yourself

If you want to dig in with DevTools, two tricks find almost every overflow.

1. Outline everything

Temporarily add this rule (in DevTools or a test stylesheet) and look for the box that runs past the right edge:

* { outline: 1px solid red; }

Outlines don't take up space, so unlike borders they don't change the layout you are debugging.

2. Ask the page

Paste this into the DevTools console with a phone-sized viewport. It compares the document's scroll width with the screen and lists elements whose right edge is past the screen edge:

const w = document.documentElement.clientWidth;
console.log('page', document.documentElement.scrollWidth, 'screen', w);
document.querySelectorAll('body *').forEach(el => {
  if (el.getBoundingClientRect().right > w + 1) console.log(el);
});

The list includes parents of the culprit too; the innermost element is usually the one to fix.

Common causes and how to fix them

Fixed widths in pixels

A container with width: 1200px or a sidebar with width: 400px can't shrink. Let it be fluid with a ceiling instead:

.container { width: 100%; max-width: 1200px; margin-inline: auto; }

Images, video and embeds

Media render at their natural size unless told otherwise. A short global rule handles most cases:

img, video, iframe, svg { max-width: 100%; height: auto; }

For iframes that need a fixed shape, such as video embeds, set width: 100% together with an aspect-ratio instead of a pixel height.

Long words, URLs and code

A long URL, email address or product code without spaces can't wrap by default. Allow breaking anywhere when needed:

p, li, td { overflow-wrap: anywhere; }
pre { overflow-x: auto; }

overflow-wrap: anywhere only breaks a word when it would otherwise overflow, so normal text is not affected. Code blocks are better given their own horizontal scroll.

Flex and grid items that refuse to shrink

Flex items have min-width: auto by default, which means they won't get narrower than their content. A long word or a wide child inside a flex item pushes the whole row wider. The same happens with 1fr grid columns. The fix is to allow shrinking:

.row > * { min-width: 0; }
.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

Wide tables

Data tables often need more room than a phone has. Rather than squeezing them, put the table in its own scroll container so only the table scrolls, not the page:

<div class="table-wrap"><table>…</table></div>

.table-wrap { overflow-x: auto; }

The 100vw pitfall

width: 100vw looks like "full width", but vw is measured against the viewport, including any space taken by a classic scrollbar. On desktop browsers with visible scrollbars, a 100vw element is wider than the page. Adding padding or a margin to a 100vw element overflows on phones as well. Prefer width: 100%, or for full-bleed sections inside a narrow column use a layout that doesn't depend on vw arithmetic.

Negative margins and off-screen positioning

Grid systems with negative row margins, decorative shapes positioned with right: -50px, and animations that start off-screen can all extend the page. Clip them inside their own section with overflow: clip on that section, or move the offset inside the container.

Why overflow-x: hidden on body is a band-aid

The quickest "fix" you'll find online is body { overflow-x: hidden; }. It hides the symptom, not the cause. The wide element is still wide; its right part is just cut off, so text, buttons or form fields can disappear without anyone noticing. It also behaves inconsistently on mobile, often needs to be on both html and body, and turning an ancestor into a scroll container can break position: sticky on headers inside it.

Fix the element that overflows. If you deliberately have decorative content bleeding out of a section, clip that section, not the whole page. overflow-x: clip is a better choice than hidden there because it clips without creating a scroll container.

How to check the fix

Run the free check again with a narrow phone (such as iPhone SE or Galaxy S8) and a large one. The report should no longer list sideways-scrolling elements in any scenario, including large text and the open menu. Then open the page in the phone window and try to drag it sideways: it should stay put.

Check Safari as well as Chrome. WebKit and Chromium differ in details such as form control widths, font metrics and how they treat 100vh and 100vw, so an overflow can appear on iPhone only. The responsive design checker lets you compare several screen sizes in one run.

Related guides