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?
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?
To fix the horizontal scrolling issue on mobile, try these steps:
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.
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.
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.
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.
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!
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; }
}
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):
html, body { overflow-x: hidden; max-width: 100%; }If that doesn’t work, check for elements with position: absolute or fixed, as they might be causing layout shifts.