1 column product page glitch

Technical Q&A
,
1

Hi all, this is actually a repost of my other thread but when I tried to post my shop link as other users requested it got deleted by a bot :frowning: I’ve tried again this time adding a space in front of the .com

iqmciv-z3.myshopify .com

Issue below:

I’m using the Horizon theme and there’s a glitch with the column display.

Supposedly on desktop, the collection displays as 3 columns and on mobile it displays as 2. If on desktop I shrink the page width the column number should adjust to match.

Most of the time this works well. However I find that there is a certain width between the mobile and the desktop where the columns randomly jump to 1.

I had a look at the inspect element and found this relevant section:

/* This logic helps prevent displaying one column for an large or extra-large product card size on a small screen. We want it to display at least two columns.*/

{% case section.settings.product_card_size %}

{% when ‘extra-large’ or ‘large’ %}

@container product-grid (max-width: calc({{ product_card_size }} \* 3 + {{ section.settings.columns_gap_horizontal }}px \* 2)) {

  .product-grid--{{ section.id }}:is(.product-grid--grid) {

    --product-grid-columns-desktop: repeat(2, 1fr);

  }

}

{% endcase %}

So it looks like the devs attempted to fix this glitch, but it’s not working for me?

2

First you’d need this:

.main-collection-grid {
  width: 100%;
}

This can go either in collection grid section “Custom CSS” setting, or “Custom CSS” under “Theme settings”.

And then also

@media (min-width: 750px) and (max-width: 900px) {
  .product-grid.product-grid--grid {
    --product-grid-columns-desktop: repeat(auto-fill, minmax(210px, 1fr));
  }
}
3

This worked beautifully, thank you! I changed the minmax to 200px to get the tiling to work as well :slight_smile: