On mobile showing a bit of 2nd photo

[TheDuckDuck]

As you can see in the image, on mobile it shows a bit of the 2nd image for some reason, how can I center the one image and make it so the others don't show.

Store URL is: https://dododuck.ca/products/dodo-duck

[Guleria]

Hello @TheDuckDuck ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your section-main-product.css file and paste the following code at the bottom:

@media screen and (max-width: 378px) {
.product__media-list .product__media-item {
    width: calc(100% - -2rem - var(--grid-mobile-horizontal-spacing));
}
}

If you need help with code part you can contact me for services

You can find the email in the signature below.

Thanks

[LizHoang · Accepted solution]

Hi TheDuckDuck,

This issue can be resolved simply by CSS codes added to your theme codes. Please go to your Shopify Admin > Online Stores > Themes > Customize > Custom CSS to add the custom code I'll attach below:
@media screen and (max-width: 600px){
.product--thumbnail_slider.product--mobile-hide li.product__media-item {
    width: calc(100% - 3rem) !important;
}
}

Here would be the result after you add this custom CSS code to your theme: https://prnt.sc/Os70XPmtj1dQ.

Hope this helps! Should you have any further questions, please feel free to let us know.

[Dan-From-Ryviu]

Hi @TheDuckDuck 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

@media (max-width: 749px){
    .product .product__media-list .slider__slide {
        width: calc(100% - 3rem) !important;
    }
}