How Do I Get My Store to Show 2 Categories Per Row on Mobile?

Shopify Discussion

Topic summary

A user working with Shopify’s Flow theme needed to display 2 categories per row on mobile devices instead of the default single-column layout. The issue occurred while customizing a draft version of their store (3dprintsbytrey.com).

Solution Provided:
A CSS code snippet was shared to add to the Custom CSS section:

  • Uses media query targeting mobile screens (max-width: 767px)
  • Modifies .collection-grid elements to display two items per row
  • Adjusts flex properties and width calculations to achieve the desired layout

Outcome:
The CSS solution successfully resolved the issue. The user confirmed it worked as intended.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

I am using the Flow theme and want 2 Categories to show per row while viewing on Mobile. I’m assuming I have to do this through the Collection List option. My website is 3dprintsbytrey.com and I am currently changing the look of my whole website. The issue is happening when I am customizing a new website, not the one that is currently live. Any help would be appreciated.

1 Like
2

Hey @trey75

Can you share the preview URL of your draft theme so that I can help you out?

Best Regards,

Moeed

3

Please add it into the Custom CSS in the Section

@media (max-width:  767px) { 
  .collection-grid > div {
    flex-basis: auto;
    width: calc((100% - 15px) / 2);
  }
  .featured-collections-wrapper .collection-grid.keep-spacing {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

Try it

4

Hi @trey75

Would you mind sharing the store link then we can provide you with a suitable solution? (and entry password if the store hasn’t been published yet)

Looking forward to hearing from you soon. Thank you!

Best,
Daisy - Avada Support Team.

5

This worked! Thanks so much.