The layout on our website was fine until I opened it today and instead of 4 columns of products there was only 3. I opened the site in firefox and its working fine 4 products wide. In chrome its like the 4th column on the grid is just empty?

I also have a live site which is producing the exact same results. I haven't changed any css or coding for some time.

Also when I change the layout option to 3 or 5 columns it produces 1 less column than it should. Firefox is fine.

If I reduce the resolution to <1200px The grid system changes to Medium size and it now produces the correct results.

I have been trolling through the code trying to work out why its not rendering correctly but I can't find anything.

Link Removed

Please Help

1 Answer 1


Try this:


.products-grid .item {
    font-size: 14px;
    float: left; /* change to float left */
    display: inline-block;
    vertical-align: top;


.item .addtocart {
    display: inline-block;
    margin: 0 4px 0px; /* change margin bottom to 0px */
    vertical-align: top;
    font-size: 13px;
  • This worked. Thank you. Would you be able to provide a brief explanation on this? And why did it work then stop has chrome changed? Very confusing.
    – Pragman
    May 18, 2017 at 0:39
  • Not sure either, probably because some of the products became out of stock and this changed the inner html of some of the grid items, resulting in styling changes. The use of float is always recommended though when using percentage widths. May 18, 2017 at 1:06

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.