Solved

Adjust Whitespace/padding on the left and right side of Product Images in DEBUT theme.

loganwright
New Member
4 0 0

Hi everyone! I'd like the product thumbnails on my products pages to appear larger and also closer together. Can anyone write some code(s) that can both remove some of that whitespace on the left and right sides of the gallery of images, as well as some of the space between each of the three rows? The goal is for the thumbnails to appear a bit larger, as well as a little closer together. Thanks so much! 

The image below should give you a better idea of what I'm asking -- bigger pictures, closer together. 

Oh! And can you also please make the names of the products align with the left sides of the thumbnail pics? Because right now they all seem too far left.

 

whatiwant.png

 

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @loganwright 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-collection-template .grid-view-item__image-wrapper.product-card__image-wrapper {
	max-width: 100% !important;
        max-height: 100% !important;
}
#shopify-section-collection-template .grid-view-item__image {
    max-width: 100% !important;
    max-height: 100% !important;
}

 

View solution in original post

Replies 8 (8)

Kinjaldavra
Shopify Partner
2302 570 1422

hello @loganwright 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

loganwright
New Member
4 0 0

Sure thing! 

The url is: https://dwntwn-prints.myshopify.com

Password: 124

 

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @loganwright 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-collection-template .grid-view-item__image-wrapper.product-card__image-wrapper {
	max-width: 100% !important;
        max-height: 100% !important;
}
#shopify-section-collection-template .grid-view-item__image {
    max-width: 100% !important;
    max-height: 100% !important;
}

 

loganwright
New Member
4 0 0

This is PERFECT!! Thank you so much.

Kinjaldavra
Shopify Partner
2302 570 1422

@loganwright 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance, If helpful then please Like and Accept as Solution

BadApple
Visitor
1 0 0

I have this same issue, however, when i'm trying to edit code i can't find a file that says assets/themes.css

 

omero
Explorer
58 0 12

Hi @Kinjaldavra 

I use Studio theme 10.0.0 . I want to remove right and left white space in collection pages as well. I don't have theme.css in my theme. Could you help me how should I proceed with this solution?

I hope you are still active

Thanks very much

omero
Explorer
58 0 12

Hello,

I tried this solution on studio 10.0.0 and didn't work for me. theme.css doesn't exist so I tried on base.css but didn't work. Could you let me know where should I add it