CSS for Shop Product Display

HTML & CSS
1

Hi all,

I am having problems displaying the products correctly on my shop page.

Please refer to the site.

The product for each odd rows are behaving weirdly, how do I get the products to align 3s in a row?

Any help rendered is greatly appreciated.

Regards,
Chris

2

Floating doesn’t work there because the list items have variable heights. A better option is to do this:

.products li {float: none !important;
display: inline-block !important;
margin-left: 28px !important;
vertical-align: top;
}

I’ve added !important there to override all the instances of float etc. Ideally, remove the float declarations and the original margin, as it’s not good to be using !important. But you can use the above code just to test the results first. :slight_smile: