Shopify themes, liquid, logos, and UX
My product page has this weird spacing on the right when viewed in google chrome on mobile, and on safari it keeps shifting left and right when scrolling. How can I fix this please?
https://www.wastd.world/products/do-all-serving-platter
You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
I would blame the Beae. In their stylesheet they have a rule like
body,html {
width: 100vw;
Usually, it's not the best to use rules like this. Widely, discussed and explained for example here:
When using width: 100vw in browsers that are configured to show a full scroll bar, that evaluates to the width of the visible website plus the scroll bar width. But an element with that width is actually wider than what is visible in the browser's viewport. So you will get completely unnecessary horizontal scrolling
You may try to alleviate this by adding rule like this to, say, your "Custom CSS" under "Theme Settings"
body,html {
max-width: 100%;
}
Should also raise the issue with Beae.
Update:
yes, you can also set overflow-x: hidden;, but it will kill your sticky media gallery -- it will no longer stay in place while you scroll past product form and description.
I'd rather do it like this, so that it only apply to mobiles/tablets where it's most noticeable.
@media (max-width:750px) or (pointer:coarse) {
html, body { overflow-x: hidden; }
}
This can also go to Theme settings=> Custom CSS
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024