Add border with shadow around products in Debutify theme

[Dutchies]

Can anyone help me adding borders around the products like in the example below?

I tried a couple of solutions but none worked. I use the Debutify theme.

Thanks!!

[suyash1]

@Dutchies - can you please share your website link?

[Dutchies]

@suyash1 

dutchies-cbd.myshopify.com

password = 0702

[suyash1 · Accepted solution]

@Dutchies - something like this?

.product--wrapper{border: 1px solid #e2e2e2;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -4px #e2e2e2;}

[Ninthony · Accepted solution]

I would do it around everything and add a little padding so that it looks a little more like his original example:

.grid-product__wrapper {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .3);
    padding: 20px 15px;
}

You can add that to the bottom of your theme.scss.liquid file in your Assets folder under Online Store > Themes > Actions > Edit Code 

[Dutchies]

Is it possible to add it also for featured products?

[Ninthony]

The code I provided should work on both your collection pages and your home page.

[Dutchies]

@Ninthony @suyash1 

Thanks to both of you!

[suyash1]

Welcome.

[Dutchies]

@Ninthony @suyash1 

What code do I have to add to get all the pictures / borders the same size? 

The 3 products on my page are testproducts, but I resized every image to 800x800 and it's still different sizes