I want to make product image full width for mobile on dawn theme

[Ecomsmartify]

I want to make product image full width for mobile on dawn theme and I want to make this like a reffrence image @DaisyVo Please help me with this thanks in advanc 
product page link: https://store1.ecomsmartify.shop/products/zoha
store passwrod: 4
my product page 

 reffrence image 👇

 

[topnewyork]

Hello, @Ecomsmartify 

Thanks, for the info. Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 749px){
section#MainProduct-template--16666186809524__main .page-width {
    max-width: 100% !important;
    padding: 0px !important;
}
}

Thanks!

[anupam1607 · Accepted solution]

Hey @Ecomsmartify 
Add below CSS in bottom of you your `section-main-product.css`

@media screen and (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {margin-left: 0;}
    .product-media-container.constrain-height.media-fit-contain{width: 100%;}
    .product__media-list .product__media-item {width: 100%;}
}

[Ecomsmartify]

Hello @anupam1607 This is prefectly fine thanks for providing the exact solution, But there is some issue when I swip to next then the next slide is not taking the full width as you can see in the picture below Thanks again 😍 just please help me to fix this as well Thanks 

 

[anupam1607]

In componenet-slider.css file, remove this `.slider.slider--mobile` css from this`.slider.slider--mobile` class.

[Ecomsmartify]

ooh this is perfect Thanks @anupam1607