Hi, I am a Shopify junior Developer and l am in trouble to solve the theme error. The theme is showing scroll from left to right. Its mean it is not responsive. Please see this and make it responsive on desktop. Here the Link:
Topic summary
A junior Shopify developer is experiencing a horizontal scrolling issue on a theme’s collection page, indicating the layout is not responsive on desktop.
Proposed Solutions:
-
CSS Fix: One user suggests adding
overflow-x: hiddento the.body-themeclass in theme.css to prevent horizontal overflow. A screenshot demonstrates where to insert this code. -
Diagnostic Approach: Another user provides a JavaScript snippet for the browser console that identifies all page elements extending beyond the right screen border. When tested on the provided URL, the script initially detected 16 elements (belonging to the cart drawer), but found no issues after opening the cart, suggesting the problem may be intermittent or already resolved.
Current Status: The issue appears inconsistent, as one responder could not reproduce the horizontal scroll at the time of testing. The discussion remains open with diagnostic tools provided but no confirmed resolution.
hi @Abdul35 ,
Go to Shopify Admin → Online Store ->Theme → Edit code->theme.css
Add the below code at the end of the theme.css file.
.body-theme {
overflow-x: hidden;
}
Not seeing the problem right now.
Here is a JS code snippet I use in cases like this and which you can run in Browser developers console (or add as a snippet in Sources):
[... document.querySelectorAll('*')].filter(e=> { let r=e.getBoundingClientRect().right; if (r > window.innerWidth) { console.log(r, e)}})
It looks at all elements on the page and outputs those which extend beyond the right screen border. For example:
First run showed 16 elements which has their right edge to the right of the screen border. However, looking at class names we can see that these elements belong to the cart drawer.
I’ve clicked the cart icon and ran the code again – no offending elements.