What is the correct way to make my product page images full width on mobile? (Dawn theme)

[faecom1]

Hi , I’m finding it difficult to make my product page images full width of page on mobile without this problem.

I’ve tried using this code

@media screen and (max-width: 749px)

.product__media-list .product__media-item{
width: 100%

}

I does work to make image full screen but it causes issues with the slider counter as it shows there be one more image than there actually is. (As you can see in screenshot counter says 36, then when i make full screen it incorrectly shows 37)

I’ve now reverted the change back to the orginal code.

Can someone please help.

Store url: https://belmori.com/products/platform-fluffy-slippers-women-house-flats-fashion-plush-winter-designer-shoes-ladies-home-elegant-casual-footwear-large-size?variant=49284547379543

[Dan-From-Ryviu]

Hi @faecom1

You can add this code at the bottom of base.css file in Online Store > Themes > Edit code to do that

@media (max-width: 749px) {
    .product__media-wrapper .slider.slider--mobile {
         scroll-padding-left: 0;
         column-gap: 0;
    }
    .product .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0;
    }
    .product .product__media-list .product__media-item {
        width: 100%;
    }
}