Envy: Info Columns: Show all the items on desktop

Store Design
, , , ,
1

Envy theme, Info Columns section..:

Say I have 6 items and set the Info Columns to 3, so that way I want it all to divide up into 2 rows on desktop only. Is this possible and if so, how?

Right now it stays at 1 row (with 3 columns of course)…

2

hey @DutchDelight can you please share the URL of your website

3

Hi @DutchDelight

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Hi @DutchDelight

Envy’s Info Columns is meant to display all information in one row according to the column count. If you have six items with three columns, it will automatically wrap into double rows. To make two columns only on desktop, you can override the grid with CSS and add this custom code below, changing the section grid to: grid-template-columns: repeat(2, 1fr); for the desktop breakpoints. This will slice the six elements into two columns and several rows.

5

That’s a great tip and very interesting, thank you!
I’ve tried this though and it didn’t work unfortunately, but it was part of more css that I needed to get it to work. Thank you! Glad it could be done through css!
Part of the issue was that the info-columns use Swiper to make them loop. To turn this off, I would have to add height:auto and overflow:visible. (both set to !important).

Edit: I’m sorry… I just edited my initial question, as I wanted 3 columns and 2 rows. (my post said 3 columns and 2 columns, which made you come up with “repeat(2, 1fr);” .. I needed “repeat(3,1fr);”.. but other than that it was a great help!

6

@DutchDelight

Add the following css in your assets/theme.css or base.css bottom of the file.

/* Desktop: convert slider into grid */
@media screen and (min-width: 990px) {
  .info-columns .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* adjust spacing */
    transform: none !important;
    height: auto !important;
  }

  .info-columns .swiper-slide {
    width: 100% !important;
    height: auto !important;
  }

  /* Disable slider overflow */
  .info-columns .swiper {
    overflow: visible !important;
  }
}

Thanks!

7

Almost…
Make sure to always look at the min-width of the media. You may want to do something smaller, depending on what you’re looking for. I did smaller, as I wanted to have it act the “normal" way” correctly on small devices only.
Other than that I wouldn’t advise y ou to add it to a css file, because then it’ll act like this for ALL the Info Columns on every page.
For Envy users, go to the section you want to apply it to and add it to the css there. That way it’ll only act like this on that particular Info-Columns section, while other Info-Columns sections on the page will act like before.