Horizontal scrolling on mobile version

[Boggiii19]

Hi. 

No matter what i am trying to add on theme.liquid or anywhere else, i cannot get rid of the horizontal scrolling on mobile version that is present on any page.

https://www.theglowingneststore.com/   this is my store

May i get some help please?

[Juleebiz]

To fix the horizontal scrolling issue on mobile, try these steps:

1. Check for Oversized Elements – Some images, text boxes, or sections might be wider than the screen. Adjust them in the theme editor to ensure they fit within the page layout.

2. Inspect Margins and Padding – Large margins or padding can push content outside the screen width. Reduce or remove unnecessary spacing in sections that extend beyond the edges.

3. Review Custom Sections – If you've added custom elements, one of them might be causing the issue. Temporarily remove them and check if the problem persists.

4. Test Different Themes – Try previewing another theme to see if the issue is theme-related. If switching themes removes the horizontal scrolling, the problem might be within your current theme’s settings.

5. Use Shopify’s Mobile View – Open your store’s customization settings and preview it on mobile. This can help identify sections that are too wide.

After making these adjustments, refresh your site on a mobile device and see if the horizontal scrolling disappears. Let me know how it goes!

[Dan-From-Ryviu]

Hi @Boggiii19 

You can try to add this code to theme.liquid file and check if it solve the issue 

@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}

[Promer · Accepted solution]

Hi @Boggiii19 

Horizontal scrolling on mobile usually happens due to overflowing elements. First, inspect your site using Chrome DevTools (F12 > Toggle Device Toolbar) and check for elements with width larger than 100vw. Common culprits are large images, sections with overflow-x: visible, or elements positioned off-screen.

You can try this code (hope this helps):

<style>
html, body {
overflow-x: hidden;
max-width: 100%;
}
</style>

[Promer]

If that doesn’t work, check for elements with position: absolute or fixed, as they might be causing layout shifts.