Product page displays in 1 column at a certain page width

Technical Q&A
,
1

I’ve got a bug on my Horizon theme.

Supposedly on desktop the collection displays as 3 columns and on mobile it shows as 2. If on desktop I shrink the page width the column number also adjusts 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 the code is clearly not working. Any ideas how I can fix it?

2

Hi @illoustrationsz,

Please send the website link, I will check it for you

3

@illoustrationsz can you please share your website link?