Adjust main collection lists to display two columns per row instead of one column per row- on mobile

Technical Q&A
1

Hello everyone, I’m currently working on a Shopify website - specifically the “Babs” theme. I downloaded the theme and uploaded it to Shopify. Hey @PageFly-Victor , maybe you can help

But I have a few problems that need to be solved.

Problem 1:

“Adjust main collection lists to display two columns per row (on mobile) instead of one column per row.”

I have 10 different main collections:

  • Beregening & irrigatie
  • Buiten leven
  • Buitengebouwen
  • Buitenverlichting
  • Elektrische gereedschap
  • Haarden & barbecue collectie
  • Tuin accessoires
  • Tuinmeubelen & accessoires
  • Tuinieren
  • Zwembaden & spa’s

Under each main collection, there are several sub-collections. When you look at the main collection page on mobile, you can see that the sub-collections are currently displayed as one column per row. Instead of one column per row, we would like to see two columns per row. The columns are displayed perfectly on desktop.

The website is www.gardies.nl

2

Hi @Gardies

My suggestion is to leave them one view in mobile as two in a row doesn’t look good.

Sheesh_b_0-1683053816715.png
Sheesh_b_0-1683053816715.png554×873 187 KB

Thanks

Sheesh B

3

Hey @Sheesh ,

Thank you for showing it to me.
Are you still able to show me the code and where I can paste the code, so I can have a final look while doing some small adjustments regarding the text.

Thank you!

4

Hey @Sheesh_b ,

Are you also maybe available to show me another extra code without showing the text (description)? This means that we only will see the title and amount of items and of course including shop now.

Maybe this is also a possibility?