CODEWITHSUNDEEP
htmlcsslist
user1269625
user1269625

Reputation: 3209

CSS list item weird positioning

I have this page here with an unorder list and list items:

https://artendijen.com/product-category/paintings/

towards the end of the page, there is a massive space where 2 list items should be, but are not. As you can see either from looking at the attached photo or looking at the site:

enter image description here

Here is my CSS for the list items:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
float: left;
margin: 0 3.8% 2.992em 0;
padding: 0;
position: relative;
width: 230px;
margin-left: 0;
}

I have no idea why this is acting like this? any ideas?

Thanks, J

Upvotes: 1

Views: 169

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240858

It's because of the differing heights of the li elements.

Adding the following will solve this:

.products.animals > li {
    height: 310px;
}

Upvotes: 1

Related Questions