Stretch theme mobile horizontal scroll remove

[siva_fds]

I want to remove the horizontal scroll in the mobile version

Tariq Riaz

pw: fds1

[big-bulk-discount]

Hey @siva_fds ,

body,html {
overflow-x: hidden !important;
width: 100%;
}

You can try this code it might help you
Thank You!

[Ecom_swift_LLC]

Hello @siva_fds, that overflow-x:hidden trick just masks the scrollbar, it won’t fix whatever’s actually pushing past the edge. Open the page in DevTools mobile view and run this in the console, it’ll log the exact element causing it: document.querySelectorAll(‘*’).forEach(e=>{if(e.getBoundingClientRect().right>document.documentElement.clientWidth)console.log(e)}). On Stretch it’s usually a product-card hover image or a slideshow slide sitting outside its container, once you find it, fix that element’s width/margin instead of hiding overflow globally (which can also break sticky headers).

If this helped, please mark it a solution

[devcoders]

Hi @siva_fds

I checked the mobile version, but I’m not seeing any horizontal scroll issue on my end. Could you please share a screenshot or let me know which page/section you’re seeing it on? I’ll check it again and fix it accordingly.

Best regards,
Devcoder

[HotspotStudio]

Hi @siva_fds,

Had a look at your preview link. I’d avoid putting overflow-x: hidden on html and body. It hides the symptom rather than fixing it, and setting overflow on those two elements also breaks position: sticky further down the page, so if your header is sticky now or becomes sticky later, it will quietly stop working.

From what I can see the overflow is coming from the announcement bar section above the header, the one with the slider. Scoping it to that section is much safer:

.shopify-section--announcement-bar {
overflow-x: hidden;
}

You can add that in Theme settings > Custom CSS, no need to edit any theme files.

Worth confirming the class name in DevTools first, since it can differ between themes. And if you’d rather fix the cause than clip it, check the slider track inside that section, usually something in there has a fixed width or a negative margin that makes it wider than the viewport.

UPD: Sorry, I should have explained this properly the first time.

The overflow isn’t the announcement bar itself, it’s the carousel arrows inside it. The theme gives .tap-area a ::before pseudo-element that acts as an enlarged tap target:

.tap-area::before {
content: “”;
width: var(–tap-area-size);
height: var(–tap-area-size);
left: calc(50% - var(–tap-area-size) / 2);
position: absolute;
}

With --tap-area-size at 2.25rem it comes out 36x36, which is wider than the arrow button itself. The next button sits flush against the right edge of the viewport, so half of that invisible box hangs off the page and the browser gives you a horizontal scroll.

Good news is the pseudo-element has content: “” and nothing visible in it, so clipping it costs you nothing on screen:

[Ecom_swift_LLC]

Hello @siva_fds, @HotspotStudio’s diagnosis is spot on - it’s the announcement bar’s carousel arrow tap-area, not the header. One thing worth adding: test the fix on actual iOS Safari, not just DevTools’ mobile emulator, since iOS is stricter about rubber-band bounce and can still show a hint of scroll on an overflow that Chrome’s emulator renders as fully clean. If you want the sticky-safe version everywhere, overflow-x: clip on that section works the same as hidden here without the risk of breaking position: sticky elsewhere on the page.

If this helped, please mark it a solution