Debugging

How to find and fix horizontal scroll on iPhone

The page slides sideways under your thumb, or there is a strip of blank space down the right-hand side. It looks fine on your laptop. Something on the page is wider than the phone, and the job is to find which element.

Updated 10 November 2026

Short answerA page scrolls sideways when something in it is wider than the viewport, which is 375 to 440 CSS px on an iPhone. Find the element whose right edge is past the edge of the viewport, then fix its width. It is usually a fixed width, a long unbroken string, an image or table with no maximum width, or a flex or grid child that can’t shrink. Hiding the overflow on body covers the symptom and leaves the cause.

Why it only shows on the phone

On a laptop the viewport is wider than anything on the page, so nothing sticks out. An iPhone gives the page 375 to 440 CSS px (see iPhone viewport sizes), and the first element wider than that makes the whole document wider than the screen.

It can also show on one iPhone and not another. A 400 px card fits an iPhone 17 at 402 px and overflows an iPhone 17e at 390 px or an iPhone SE at 375 px. If a bug report says “it scrolls sideways” and you can’t reproduce it, test at the reporter’s width.

Find the element

With a computer. Open the page in your browser’s responsive mode at 375 px wide, or attach Safari Web Inspector to the phone (see inspect element on iPhone), and run this in the console:

const vw = document.documentElement.clientWidth;
document.querySelectorAll('*').forEach((el) => {
  if (el.getBoundingClientRect().right > vw + 1) console.log(el);
});

It logs every element whose right edge is past the viewport. Parents and their children are both listed, so look for the innermost element that is too wide. Ignore anything inside a container that scrolls on purpose, such as a carousel: those don’t widen the page.

By eye. Add * { outline: 1px solid red; } for a moment, scroll to the right-hand edge and look for the box that pokes out. Or delete sections in the inspector until the sideways scroll stops.

With only the phone. Load an in-page console such as Eruda (the bookmarklet is in the inspect element guide) and run the same snippet, or use an on-device tool with an overflow finder (below).

The usual causes and their fixes

Cause	Fix
A fixed `width` or `min-width` larger than the phone	`max-width: 100%`, or `width: min(400px, 100%)`
Images, video and iframes at their natural size	`max-width: 100%; height: auto`
Long URLs, email addresses and other unbroken strings	`overflow-wrap: anywhere`
Wide tables and code blocks	Wrap them in a container with `overflow-x: auto` so they scroll inside it
A flex child that won’t shrink below its content	`min-width: 0` on the flex item
A grid column of `1fr` holding wide content	`minmax(0, 1fr)`
`width: 100vw` with padding, a border or a margin added	`width: 100%`, or `box-sizing: border-box`
Negative margins, or elements moved off the right-hand side (off-canvas menus, decorative shapes)	Clip the nearest wrapper with `overflow-x: clip`

Check the first four before anything else. The flex and grid ones are harder to spot because no width is set anywhere: the item simply refuses to be narrower than its longest word or widest child.

Why overflow-x: hidden on body isn’t the fix

Putting overflow-x: hidden on body is the usual quick fix. It has three problems.

The content is still too wide. Whatever stuck out is now cut off, and that may be a button or the end of a line of text.
It isn’t reliable. Overflow set on body is passed up to the viewport, and CSS-Tricks found that some desktop browsers still let you scroll to hidden off-screen elements with the rule on body. It recommends hiding overflow on a wrapper element instead.
It can break other things. An element with overflow: hidden becomes a scroll container, so position: sticky elements inside it stick to that container and not to the page, and appear to stop working. overflow-x: clip clips without creating a scroll container, so prefer it when you do need to clip.

Clipping is reasonable for decoration that is meant to hang off the edge. For everything else, fix the width.

Check that it has gone

Test at 375, 390, 402 and 440 px, and at 320 px if you support Display Zoom and WCAG’s Reflow criterion.
Rotate the phone. Landscape has its own fixed-width traps.
Wait for late content: web fonts, embeds, cookie banners and adverts can add the overflow after the first paint.
Check every template, not only the home page. Long titles and user content are common culprits.

Finding overflow on the phone with ViewPortal

ViewPortal’s dev tools include an overflow finder. Load the page at a phone preset and it tells you how many pixels wider than the viewport the page is, then lists the worst offenders with their tag, id or class and how far each one sticks out, largest first. It leaves out elements inside a container that already clips or scrolls its own overflow, such as a carousel, because those don’t widen the page. Outline boxes draws the edge of every element so you can see what is poking out, and tap-to-inspect shows an element’s size, padding and margin.

It works at any preset or custom width, so you can check 375 px (iPhone SE), 390 px (iPhone 17e) and 382 px (iPhone Duo closed) from one phone without a Mac. The limits: it tells you which element, not which CSS rule, and there is no style editor, so you make the change in your code and scan again. ViewPortal is free to download, with no accounts and no tracking. Multi-view, dev-server previews and the dev tools are in Pro, a one-time £4.99 unlock.

ViewPortal on the App Store

Questions people ask

Why does my website scroll sideways on iPhone but not on desktop?

Because an element is wider than the phone’s viewport, which is 375 to 440 CSS pixels. On a desktop the viewport is wider than that element, so nothing overflows. Fixed widths, long unbroken strings, and images or tables without a maximum width are the usual causes.

How do I find which element is causing horizontal scroll?

Compare every element’s right edge with the viewport width. In a console, loop over document.querySelectorAll('*') and log elements whose getBoundingClientRect().right is greater than document.documentElement.clientWidth. An outline on every element, or an overflow finder, shows the same thing visually.

Is overflow-x: hidden on the body a good fix?

No. It hides the symptom, can cut off content, and is unreliable on its own. Fix the element that is too wide. Where clipping is intended, apply overflow-x: clip to a wrapper element.

Why is there a white gap on the right side of my site on mobile?

It is the same problem. An element extends past the right edge, the document becomes wider than the screen, and the extra width shows as blank space when you scroll sideways.

Does width: 100vw cause horizontal scroll on iPhone?

On its own it matches the viewport. It overflows as soon as padding, a border or a margin is added to it, or when it sits inside a parent that has padding. Use width: 100% for full-width blocks.