Why do I have some incomplete rows? I have products arranged in 4 columns. The first raw is full, the second one is not, the third and the forth are full with products, the fifth contains only one products... so on.

Why is that problem? How can it be fixed? Can be seen here: http://www.ledpro.ro Thank you!enter image description here

  • 1
    as @La Mi said, it is a CSS problem, try to make each "item" the height. Your first few items were too "tall" and pushed everything away. – d.yuk Jan 23 '15 at 9:00

I am not sure what causes this behavior, I imagine it could happen for several reasons. Definitely annoying though.

The fix for me has been one of two things:

  • Make sure that the outermost div around each product will contain floats. i.e. If you are using bootstrap, make the outermost product container belong to the "clearfix" class. Adapt this for your chosen framework / lack of framework. But be sure to contain the floats.

  • Force the product holders to be the same size. While this isn't always practical, if your products have a similar amount of text you could give them a specific height. This will definitely fix the issue, but you may have to do some media queries in your css to make sure the size works for all screens.

Good luck!

  • 1
    Thank you for answering me! Problem fixed. I have made bigger value for ".category-products .products-grid li.item{ min-height: 370px;" – Marius Jan 24 '15 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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