[Dawn Theme]In mobile view, my first product image is cutting off the right side

Store Design
1

I’m using Dawn Theme. In mobile view, my first product image is cutting off the right side.

Can anyone figure out this?

https://www.castxblast.com/products/cast-x-blast-tee?variant=45403034976558

The desktop view is perfect however the mobile view is cutting off the side.

I tried this code but it is not working for my case..

@media(max-width:767px){
slider-component.slider-mobile-gutter ul.product__media-list li:first-child{
margin-right:calc(100vw + 1rem) !important
}

}

IMG_8133.jpg
IMG_8133.jpg1170×2532 134 KB

IMG_8131.jpg
IMG_8131.jpg1170×2532 187 KB

IMG_8132.jpg
IMG_8132.jpg1170×2532 151 KB

Thank you.

2

Hey

Please try this CSS code in the media query:
@media screen and (max-width: 749px) {

.slider.slider–mobile {
scroll-padding-left: 0 ! important;

}
}

I hope this will help you.

Thank you
Pooja

3

Thank you for your response!

Your code is worked but still it’s cutting off..

Is it possible to add some space around the image?

It is okay to show the product smaller a bit..

IMG_8136.jpeg
IMG_8136.jpeg1170×2532 163 KB

4

Try this code on mobile version:

@media screen and (max-width: 749px) {
.product__media-wrapper slider-component.slider-mobile-gutter.thumbnail-slider {
padding: 0;
}
.product__media-wrapper slider-component.slider-mobile-gutter {
padding: 10px 30px;
}
}

5

Thank you.

It working.

Some items are still not but I think I need to change the images like same size as correct one.

I’ll accept as solution yours thank you.