How to remove white space in product photo thumbnails - custom product builder

https://artifypassion.com/products/retro-comic-martial-arts-poster-1

I’d like to remove the white space under and above the product gallery thumbnails. See screenshots attached. I’m using a theme called handmade and an app called custom product builder to add my products.

Thank you

Hi @s0l0m0n

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:
product-builder .cpb-preview-elements .cpb-swiper-main .swiper-slide img {margin: 0 !important; height: max-content !important;}

Regards,

San

Hi Sam,

Thank you for your response and help. I’ve tried adding this to theme.custom.css.liquid and to customproductbuilder.css (as I used Custom Product Builder to create this product) but it doesn’t seem to be working. I also tried adding it to the custom CSS box within the theme settings to no avail. Any suggestions? thank you

Hi @s0l0m0n

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

step 1:

please remove this code

#product-builder .cpb-preview-elements .cpb-swiper-thumbnails .swiper-slide img {
    margin: 0!important;
    height: max-content!important;
}

step 2:

Online Store ->Theme ->Edit code

Assets ->theme-custom.css

and please add this code

#product-builder .cpb-preview-elements .cpb-swiper-thumbnails .swiper-slide img {
    object-fit: cover !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

Hi,

Thank you for taking the time to reply. This does remove the white space. However, I think I need to change the size of the container so that the photo fits inside as currently it’s a cropped down version that shows which doesn’t look great. Please let me know if you have a solution for this. Thanks again.