Adding space between product images -- Baseline Theme

[MJ82]

Hello,

I am using Baseline Theme and I can't find a solution for this simple change I'd like to make.

If you see here the product images are listed vertically: https://contrakidsmutiny.com/collections/new-arrivals/products/we-stand-tall-long-sleeve-t-shirt-1 

I like the way the images appear, I simply want to add a very small amount of space ONLY between the product images, here is an example where you can see a very thin white line between each image: https://wearebraindead.com/products/lifted-stripe-long-sleeve-sweater-navy-multi?variant=44725162868... 

I would like also a solution that can allow the amount of space (padding value?) to be easily changed later as well.

Thank you!

[DaisyVo]

Hi @MJ82 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

div#shopify-section-product > section.grid > .relative > div.splide.splide--product ul.splide__list > li {
    margin-bottom: 20px;
}
div#shopify-section-product > section.grid > .relative > div.splide.splide--product ul.splide__list {
    background: white !important;
}​

Here is the result: https://prnt.sc/UfVeCVkhTbeh

I hope this helps

Best,

Daisy

[MJ82]

Thanks but I don’t want white space on the sides of the product images, I
only want a space between the bottom of one image and the top of the next
image underneath it as you scroll down.

Also I’d like to gap to be smaller, is this possible?

Thanks

[MJ82]

Hi Daisy,

Are you able to advise about any alternative code further to my last message above? 

Kind regards x