Horizontal scroll - Mobile Version of my homepage moves to left and right.

[Anya_]

Hi there, I have the problem that you can move my homepage in mobile browser to the left and right with one finger. When I swipe through the product photos to the left the whole page moves to the left, leaving a gap on the right side. I'm using the simple theme. Any help would be much appreciated.

You can see what I mean on mobile: https://wowpresentsusa.com/products/little-camper-baby-bodysuit

[AvadaCommerce · Accepted solution]

Hi @Anya_ ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

.site-wrapper {
    overflow: hidden !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[AvadaCommerce · Accepted solution]

Hi @Anya_ ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss->paste below code at the bottom of the file:

.site-wrapper {
    overflow: hidden !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[Anya_]

Absolutely amazing! Thank you so much for your help!

[Anya_]

Hi @AvadaCommerce 

Thank you again for your help. I've just noticed a change on the desktop version of my homepage. (Mobile is fine.) I think the code you provided might collide with another code I'm using to remove the empty tag line area in the header and bring the content up (simple theme). In the past I added this code in layout - theme.liquid:

<style>

  .main-content {

    margin-top:-6em;

  }

@media only screen and (max-width: 500px) {

  .main-content {

    margin-top:inherit;

  }

}

      </style>

I could be wrong, but I think this code and yours might collide, as the header/the empty tag line area came down again and it now covers a little bit of the photo and product title in product pages on desktop view. https://wowpresentsusa.com/products/colorful-glowing-light-up-teddy-bear

Otherwise the code you provided works fine for my original issue with horizontal scroll on mobile. Is there a way to modify your code so it would work for mobile, but not effect the desktop version? I hope it's okay to ask. Thank you.

[AvadaCommerce · Accepted solution]

Hi @Anya_ ,

You can try replace previous code by below code (only mobile):

@media (max-width: 767px) {
.site-wrapper {
    overflow: hidden !important;
}
}

Hope it can help you. ^^

[Anya_]

Absolutely perfect! It worked! Thank you so much!

[AamirAsad]

Hi,
I am facing the same issue with my site's home page, I tried the solution given here but it didn't work out. Can you please assist me

[BLU_Boutique]

Hi @AvadaCommerce ! 

I am having the same problem. I am using Vinova Salehup 2.0. The sides of my mobile version have white space and the screen slides the the right. Please help!!! 

www.Blubuffaloboutique.com Password : skeosa