Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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. ^^
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.
Absolutely amazing! Thank you so much for your help!
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.
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. ^^
Absolutely perfect! It worked! Thank you so much!
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
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024