Solved

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

Anya_
Excursionist
16 0 6

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

 

Accepted Solutions (2)

AvadaCommerce
Shopify Partner
3879 839 955

This is an 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.

banned

View solution in original post

AvadaCommerce
Shopify Partner
3879 839 955

This is an 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. ^^

banned

View solution in original post

Replies 7 (7)

AvadaCommerce
Shopify Partner
3879 839 955

This is an 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.

banned
Anya_
Excursionist
16 0 6

Absolutely amazing! Thank you so much for your help!

Anya_
Excursionist
16 0 6

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
Shopify Partner
3879 839 955

This is an 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. ^^

banned
Anya_
Excursionist
16 0 6

Absolutely perfect! It worked! Thank you so much!

AamirAsad
Tourist
8 0 2

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
Visitor
1 0 0

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