Collection pages: display products as two per row on mobile.#15

Currently on mobile, collection pages display one item per row. Some folks have requested a two item per row layout.

It would be great if we could display two products on the home page for mobile instead of one at a time :)

Hi Guys

Any update on this?

Whats the likelihood of having an extar slide bar added in here for mobile?

Hi @Oliver Narramore! While we’re still considering this as a feature integration you can give this a shot:

• Make a backup of your theme (Actions>Duplicate theme)
• Open up the code editor (Actions>Edit code)
• Open the Assets folder
• Open up the index.css file and add this to the bottom:

  @media (max-width: 38em) {
    .grid-display {
        grid-template-columns: repeat(2, 1fr);
    }
  }

This should set it up to be two per row on mobile. We’re not likely going to add a range slider for it because mobile widths can get pretty narrow— 2 per row is probably as many as we’d want without the product items getting too small.

Hi

Thanks for sending this over. Unforutnately when i used this the buttons through a wobbly and changed sizes as well :(

@Oliver Narramore Hmm. Would you mind following up with an email to help@fluorescent.co? We can sort you out over there.

Now available in Lorenza OS2! Option to choose 1-3 products per row on mobile.