Solved

Collection Columns differ in Chrome v Firefox

GeorgeD-HB
Tourist
8 0 1

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

 

GeorgeDHB_0-1714131756828.png

 

What can I do to fix?

 

Thanks in advance.

 

Accepted Solution (1)

theycallmemakka
Shopify Partner
1477 336 360

This is an 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>

theycallmemakka_0-1714132096534.png

 

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 2 (2)

theycallmemakka
Shopify Partner
1477 336 360

This is an 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>

theycallmemakka_0-1714132096534.png

 

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

GeorgeD-HB
Tourist
8 0 1

Hi Makka,

 

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