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?
You can add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}
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