NoSixties NoSixties - 4 months ago 13
HTML Question

Same drop shadow on every li when using columns

In my website I have a part where I'm using an amount of li's depending on how many entries there are.

So lets say there are 3 entries, 3 li's will be generated. When there are 4 entries 4 li's will be generated and so on. What I did is give my ul a

columns
value which changes depending on how many entries there are.

This all works flawless. However what I want now is to draw a drop shadow on every li. When I try to do this only the last li is effected the way it should be. Does anyone know how I can change this?

my li's are of the
class
item
. and the
css
I tried to apply to it is as follows

.item{width:100%; max-width: 290px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-o-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}


Hope someone will be able to tell me how to solve my problem

EDIT

As requested here is an example of what happens.
https://jsfiddle.net/x0u9xao0/

Answer

The problem was that the columns stop at the bottom of the element, so you couldn't see the bottom shadow (which was below that)
Adding a margin-bottom to each of the list elements meant that the column went on for some more, so you can see the bottom shadow

See fiddle