Drop shadow on empty space

Hi guys

I’m pretty new to webflow and I’m having trouble with the drop shadow. I created a CMS collection and organised it in a masonry grid then added a drop shadow to each item but for some reason there is a shadow where there is no item. Please see screen shots.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey Lawrie!

This issue is occurring because the drop shadow from the bottom item in the last column is bleeding over into the following column. I was able to correct the issue by adding a slight 5px padding to the top of the Masonry Grid child element.

That should do the trick! Let me know if you need anything further :slight_smile:

Thank you so much @TylerCourts that worked! But I now have a black border at the top of each item, is there anyway I can get rid of that?

Not sure if this is the best fix, but it appears if you put a -2px (to offset the 2px padding you up on the Collection item itself) margin on the image that is within the Collection item, it will cover up/get rid of that black line.

Like I said, not sure if that is a perfect fix, but it seems to work in this use-case. :smiley: