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


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;
|improve this answer|||||
  • 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 '17 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. – subroutines May 18 '17 at 1:06

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.