Hey!
On my mobile, if I zoom out the website it looks like this and it’s hard to re-center.
Can it be fixed?
https://theroundcloud.myshopify.com/
Thanks!!
Topic summary
A user is experiencing a mobile zoom-out issue on their Shopify website where zooming out makes the site difficult to re-center. The problem appears specific to mobile devices, while desktop/tablet display correctly.
Attempted Solutions:
- Adding
body { overflow: hidden; margin: 0 auto !important; }to base.css - Adding
body { overflow-x: hidden; }to theme.css or custom.css - Modifying overflow properties with
!importantflags
Current Status:
The issue remains unresolved. The first solution prevented scrolling entirely (made the website static). Subsequent CSS modifications targeting the base.css file in the Craft theme’s Assets folder have not fixed the zoom-out behavior.
The user confirmed they’re using the Craft theme and provided screenshots showing their file structure, which lacks the typical theme.css or custom.css files mentioned in some solutions.
You can try to add this code base.css to check if it can solve your issue
body { overflow: hidden; margin: 0 auto !important; }
It made the website static. (couldn’t scroll up or down on website)
XD
Hi,
Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css
body { overflow-x: hidden; }
Try to update code like this and check again
body { overflow: auto; margin: 0 auto !important; }
Hey!
Thanks for the reply!
I can’t find none of those 2 files in the Assets folder.
I got craft theme.
With your theme, it should be base.css file
1 Like
Still doesn’t work 
Did you try this code?
body { overflow: auto; margin: 0 auto !important; }
I did, doesn’t work.
The problem appears to be only on mobile.
On the desktop/ tablet the width fits perfect.