How to remove padding around product images on mobile

Store Design

Topic summary

Issue: On mobile, product images have unwanted padding; only the first image displays correctly without padding. Goal is to remove padding for all product images on mobile.

Context: Store uses Shopify Dawn 15.1.0. Initial CSS used media queries targeting .grid__item:first-of-type (and setting .product__media-item width: 100%), which only affected the first image.

Support steps: After sharing the product URL, a helper suggested adding a new CSS rule in section-main-product.css to adjust .product-media-container.constrain-height .media padding-top under max-width: 749px, aiming for full-bleed images.

Outcome: The suggested CSS did not resolve the issue. Removing the original code caused the first image to regain padding, so the problem persists across all images.

Notes: Screenshots are central to illustrating the padding (white space on left/top from the second image onward).

Status: Unresolved. Needs a CSS solution that removes padding for all product media items on mobile beyond just the first image.

Summarized with AI on December 20. AI used: gpt-5.
1

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):

IMG_1208.PNG
IMG_1208.PNG645×1398 1.02 MB

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

IMG_1209.PNG
IMG_1209.PNG645×1398 947 KB

Any help would be appreciated!

1 Like
2

Hi @kdop10

The code youve provide is calling only the first image.

Would you mind sharing your store URL? Thanks!

3

Yes here you go:

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

4

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

Made4uoRibe_0-1725054141619.png
Made4uoRibe_0-1725054141619.png418×766 103 KB

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!

5

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

6

For reference I’m using dawn 15.1.0