Hello, i have a problem with my product page on mobile. Currently, when i swipe left, the whole store moves slightly, which creates a thick white line on the right of my store. Can this be removed? My store is www.antico-abito.com , theme is dawn
i tried but everything looks good to me.
are you sure? Its on both my store editor and my actual website on the internet. This is only a problem on mobile by the way
Hi,
Hope this will help
-
Open DevTools and pretend your desktop is a phone
-
Run this small script to find any element wider than the screen
Script example
[...document.querySelectorAll('body *')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
tag: el.tagName,
class: el.className,
scrollWidth: el.scrollWidth,
clientWidth: el.clientWidth,
outer: el.outerHTML.slice(0,120)
}));
- If you see a class like some-gallery or product__media in step 2, edit your theme CSS and add:
CSS example
/* Replace .some-gallery with the class you found in step 2 */
.some-gallery {
width: 100%; /* don't use 100vw here */
max-width: 100%;
box-sizing: border-box;
}
/* Make sure images never overflow */
.some-gallery img,
.some-gallery picture,
img {
max-width: 100%;
height: auto;
display: block;
}
- Quick temporary patch (if you can’t find the class right away), Add this to your CSS (works as a band-aid)
html, body {
overflow-x: hidden; /* hide horizontal overflow */
overscroll-behavior-x: contain; /* stop the page from “bouncing” horizontally in supporting browsers */
}
/* extra safety for common gallery / slider classes */
.product__media,
.media-gallery,
.slideshow__slide {
max-width: 100%;
overflow: hidden;
box-sizing: border-box;
}
Note - Add CSS at the end of base.css or Create a new custom.css
This is because of your product info accordions. This is a bad code –
@media screen and (max-width: 750px) {
#shopify-section-template--25122178695491__main .product__info-wrapper .accordion {
position: relative;
width: 112%;
left: -20px;
padding: 0 20px;
}
}
Replace it with
@media screen and (max-width: 749px) {
.product__info-wrapper .accordion {
width: 100vw;
margin-left: calc(50% - 50vw);
}
}
Be very careful when assigning overflow on html and body – it will prevent sticky elements from sticking.
You can re-use the
padding: 0 20px;
then…
Please add this code to base.css file of your theme
@media (max-width: 749px) {
html, body { overflow-x: hidden; }
}
its on the product page only