Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello all,
I’m experiencing an issue with my Shopify store’s mobile layout—specifically on Safari mobile (iPhone).
My site looks fine on desktop and even on Chrome mobile, but on Safari mobile, sections don’t stack properly. Instead, some content is pushed to the right, and I have to scroll horizontally to see it. This breaks the user experience and layout badly.
To troubleshoot, I’ve:
Tested multiple Shopify themes, including an untouched version of Dawn – the issue still occurs.
Tried removing third-party apps and custom sections – still persists.
Added custom CSS (overflow-x: hidden, box-sizing: border-box) – no effect.
My site is https://upactive.co if you'd like to view it.
I’m wondering:
Is this a known issue with certain themes or Safari-specific rendering quirks?
Could it be related to a specific Shopify layout component?
Is there a way to force mobile Safari to respect the stacking and prevent horizontal overflow?
Any help would be massively appreciated!
Thanks,
Meagan
Can you let us talk
What do you mean?
How old is your iPhone IOS?
When I test in older IOS, your site does not work properly. But neither does the theme demo store and there is a whole lot of JS errors in console.
I guess when creating new generation of themes they've used some code which is not compatible with older IOS.