How to fix horizontal scroll on Shopify

01

Find what is too wide

Open the store at 360px wide in your browser’s device mode and paste this in the console. It outlines and lists every element that reaches past the right edge.

1document.querySelectorAll('body *').forEach((el) => {2  if (el.getBoundingClientRect().right > document.documentElement.clientWidth + 1) {3    el.style.outline = '2px solid red';4    console.log(el);5  }6});

02

The usual causes on Shopify

• App blocks and embeds (reviews, upsells, size charts, chat) with a fixed width: check the app’s settings for a full-width or responsive option, or contact the app
• Custom Liquid or Custom HTML sections with fixed widths or tables: wrap tables so they scroll on their own
• Videos and iframes pasted into a page or product description at their natural size
• Long product titles, SKUs or URLs that can’t wrap
• Marquee or announcement bars and sliders built wider than the screen

03

Fix it in the theme CSS

In Online Store → Themes → Edit code, add these rules to the theme’s main stylesheet (often base.css or theme.css), or in Customize → Theme settings → Custom CSS on Online Store 2.0 themes. Duplicate the theme first so you can roll back.

1img, video, iframe { max-width: 100%; height: auto; }2.rte table { display: block; overflow-x: auto; }3.product__title, .card__heading { overflow-wrap: anywhere; }

04

Don’t hide it with overflow-x: hidden

Adding overflow-x: hidden to the body stops the sliding, but the content that doesn’t fit is cut off, and it can break sticky headers and the cart drawer. Fix the wide element instead.

05

Check product, collection and cart pages too

App blocks often show only on product pages, so a home page that fits says little. Check a product, a collection, the cart and a blog post at phone and tablet widths.