Collection Columns differ in Chrome v Firefox

[GeorgeD-HB]

Hi all,

My store appears to only be showing 3 columns on the collections page in Firefox, whereas Chrome and Edge are displaying 4 columns. To my knowledge, this was working 2 days ago when I last checked.

https://henryblakehardware.co.uk/collections/pull-handles

What can I do to fix?

Thanks in advance.

[theycallmemakka · Accepted solution]

Hi @GeorgeD-HB 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media screen and (min-width: 990px) {
  .grid--4-col-desktop .grid__item {
    --grid-desktop-horizontal-spacing: 9px;
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[GeorgeD-HB]

Hi Makka,

Thank you - this worked perfectly. Do you know why this happened & is it likely to break again in the future?