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

MrStoney
Tourist
6 0 2

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

 

help.JPG.jpg

 

This is what I am trying to do

 

whatiwant.jpg

 

If you can figure this out you are a life saver

Thank you!

Replies 3 (3)

Xipirons
Shopify Partner
136 24 29

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.

 

 

Was this helpful? Like or Accept solution - Buy me a coffee
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @MrStoney 

Could you share your product page URL to check? 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

websensepro
Shopify Partner
1014 139 147

Hello @MrStoney ,

 

Please can you share the store URL?

thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here