01
Find the element that is too wide
Open the page in your browser’s device mode at 360px wide, then paste this into the console. It outlines every element that reaches past the right edge of the screen and lists them.
document.querySelectorAll('body *').forEach((el) => {
if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1) {
el.style.outline = '2px solid red';
console.log(el);
}
});02
The five usual causes and their fixes
Fix the outermost outlined element; the ones inside it usually follow.
- A fixed width, such as width: 600px on a banner or form. Use max-width: 100% (or width: 100%) instead.
- Images, videos and iframes at their natural size. Add img, video, iframe { max-width: 100%; height: auto; }.
- Long words, URLs or email addresses that can’t wrap. Add overflow-wrap: anywhere to the text.
- A flex or grid item that won’t shrink below its content. Add min-width: 0 to the item, or grid-template-columns: minmax(0, 1fr) to a one-column grid (Tailwind: grid-cols-1).
- Negative margins or 100vw widths (100vw includes the scrollbar). Use 100% instead of 100vw, and keep negative margins inside a padded container.
04
Check every width, not just one phone
A layout can fit at 375px and 414px and still break at 390px or between two breakpoints. Test the common phone widths (360, 375, 390, 414) and the in-between tablet widths, or sweep every width from 320 to 1920px.
Checklist
Questions
Why does my website scroll sideways on mobile?
One element is wider than the screen, usually a fixed-width block, an unscaled image or embed, a long unbreakable word, or a grid item that won’t shrink. The page widens to fit it.
Is overflow-x: hidden on the body a good fix?
No. It hides the scrollbar but cuts off the content that doesn’t fit, so visitors lose text and buttons. Make the element fit instead.
How do I find which element causes horizontal scroll?
Outline every element whose right edge passes the screen width (the console snippet above does this), or run a responsive check that names the element and the width where it happens.