Fix spacing / shifting on mobile view

Fix spacing / shifting on mobile view

letsgetwasted
Explorer
54 1 9

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

 

IMG_1828.PNG

IMG_1827.PNG

  

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
10080 2005 2056

Hi @letsgetwasted 

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.

tim
Shopify Partner
3856 378 1410

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

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail [email protected]