How to remove padding around product images on mobile

[kdop10]

Hello, 

I want to completely remove the padding around my product images on mobile view. I tried this code from another post but it only removes the padding from the first image. I want to also remove padding from every product image. 

Code I used:

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

@media screen and (max-width: 749px) {
    .product .grid--peek.slider .grid__item:first-of-type {
        padding-top: 0;
    }
}

1st product image (looks good):

From 2nd image and onwards (white space on left and top of image):

Any help would be appreciated!

[Made4uo-Ribe]

Hi @kdop10 

The code youve provide is calling only the first image. 

Would you mind sharing your store URL? Thanks!

[kdop10]

Yes here you go:

https://f7720b-59.myshopify.com/products/melody-cap-sleeve-mini-dress

[Made4uo-Ribe]

Just clarification, you like to make the image shown fully right? Like this. 

If it is check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the section-main-product.css

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.product-media-container.constrain-height .media {
  padding-top: max(var(--constrained-height), var(--ratio-percent));
}
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[kdop10]

It didn't work. I tried deleting the code I originally used but that just resulted the 1st page having padding all around. 

[kdop10]

For reference I'm using dawn 15.1.0