Something wrong with shadow borders

Solved
Dutchies
Excursionist
35 1 10

I need some help.

 

I added some borders with shadow around my products last week and changed a couple of other things too.

Now my borders aren't nice anymore.. As you can see it looks like on the top en on the bottom of the border the shadow just cuts off.

 

Dutchies_0-1613491363586.png

 

Website = www.ducthies-cbd.nl

Password = 0702

0 Likes

Howdy @Dutchies,

I'm not able to access your site. The link you provided does not load the store.

The Problem:

The basic issue you are seeing is that the container around each Product Card has a CSS property of overflow: hidden set. If you know how to inspect the elements in your browser you can find the parent container of the Product Cards and tweak the CSS. Then change the CSS property to be overflow: visible.

If you can provide a link to the working site I'd be happy to confirm. 

Dutchies
Excursionist
35 1 10

@calebsylvest 

 

sorry... this is the right one..

dutchies-cbd.myshopify.com

password 0702

0 Likes
Dutchies
Excursionist
35 1 10

@calebsylvest I don't know how to inspect the elements.....

0 Likes

This is an accepted solution.

Howdy @Dutchies,

The Fish:

Editing slider content is always a mess, but if you copy and paste the CSS below it should remedy the shadow clip.

On a design note: I'd also suggest removing the border added to the product cards and tweaking the box-shadow to what I provide below.

/* remove negative margin */
@media screen and (min-width: 769px) {
    .slick-format.slick-initialized .slick-list {
        margin: 0 !important;
    }
}

/* make content visible if it overflows container */
.slick-list {
    overflow: visible !important;
}

/* better shadow, no border */
.grid-product__wrapper {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
}

 

The Fishing Pole:

I could leave it at that, the answer is provided. But that won't help you long term.

So, here is a short video to get started using the Inspector Tools:

https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-th...

Dutchies
Excursionist
35 1 10

@calebsylvest 

Thank you very much for your time and efford... I did what you told me.. but it didn't work...

 

Dutchies_0-1613546027727.png

 

0 Likes
Dutchies
Excursionist
35 1 10

@calebsylvest 

 

I think I found the problem... Number of rows where 2, why I don't know... Now I've put it on 1 and added your coding, and the shadows are back.. thank you very much for your help.

Dutchies_0-1613554467705.png

 

0 Likes