I have problem with my products on homepage. I want to show my products in 2 row with 4 products in one row but in second row I have 2 products and other 2 products go in next row.

This is css that I use to customize my products

.products-grid li.item {
float: left;
width: 170px;
padding: 0px 10px 4px;

Here is screenshot of my page:


I don't have an idea how to fix that :/

1 Answer 1


If the column count is correct, meaning you have 4 items per row then it's probably caused by one item being higher than the others. You probably have 2 solutions.

  1. Give the li.item a fixed height
  2. Make the .products-grid floating with a clear: both; to ensure each row is put under the last one

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.