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?
Topic summary
A user reports mobile display issues on their product page: unwanted spacing on the right in Chrome and left-right shifting while scrolling in Safari.
Proposed Solutions:
- One responder suggests adding CSS code to hide horizontal overflow:
@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}
- Another identifies the root cause as the Beae theme’s stylesheet using
width: 100vwon body/html elements, which creates unnecessary horizontal scrolling when scrollbars are visible.
Recommended Fix:
Apply the overflow fix specifically to mobile/tablet viewports using media queries like @media (max-width: 750px) or @media (pointer: coarse) in Theme Settings > Custom CSS. This targets only devices where the issue is most noticeable.
Trade-off: Setting overflow-x: hidden will resolve the spacing issue but may disable the sticky media gallery feature on product pages.
The discussion also recommends reporting this underlying CSS issue to Beae theme developers.
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