Dawn Them - Remove product image padding on all mobile product pages

[MrStoney]

I want to remove the padding around my product images on the mobile view and cannot seem to figure out how to do it. I have looked for help everywhere and have tried every bit of code.

This Is What I Have

This is what I am trying to do

If you can figure this out you are a life saver

Thank you!

[Xipirons]

Hi @MrStoney 

Here are the steps to remove the padding around product images on mobile view for the Dawn theme in Shopify:

1. Go to Online Store > Themes > Actions > Edit Code

2. Open the file that contains the CSS for the product images. This could be one of the following depending on the specific version of Dawn theme you are using:
- assets/section-main-product.css
- assets/component-slider.css
- assets/base.css

3. Paste the following CSS code at the bottom of the file and click Save:

@media screen and (max-width: 749px) {
.product__media-wrapper slider-component {
max-width: 100%;
padding: 0;
}

.product__media-list {
padding-bottom: 0;
margin-bottom: 0;
}
}

This CSS code will:
- Set the max-width of the product image slider to 100% on mobile
- Remove the padding around the product image slider on mobile
- Remove the padding and margin below the product image thumbnails on mobile

After adding this code, the padding around your product images should be removed on the mobile view of your Shopify store using the Dawn theme.

[Dan-From-Ryviu]

Hi @MrStoney 

Could you share your product page URL to check? 

[Avalonz]

I have same problem. How can i fix it?

[websensepro]

Hello @MrStoney ,

Please can you share the store URL?

thanks!