How to change number of items per row in collection grid -Brooklyn Theme

Solved
assaaa112
New Member
3 0 0


Hi! In mobile site,  product grid shows 1 item per row but I want it to change 2 per row. How can I do that? For example firs image is current view and I want it to look like the second image. Thank you all!
Ekran Resmi 2020-09-09 23.00.46.png Ekran Resmi 2020-09-09 23.03.14.png

0 Likes
UmairA
Shopify Partner
872 85 173

This is an accepted solution.

Hi @assaaa112 ,

First of all, welcome here.

Secondly,

Add the following code to your theme.scss.liquid file (Edit HTML/CSS > Assets > theme.scss.liquid )

@media only screen and (max-width: 480px) {
  #CollectionSection .grid-uniform .grid__item {
      width: 48% !important;
      clear: none !important;
  }
}

 

Let me know if you need help with anything else.

Cheers

Umair Abbas

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
assaaa112
New Member
3 0 0

Yes @UmairA ! It works. Thank you for quick response. But there is one issue, the padding. It is different like in this image (Red Lines). How can I center it? And maybe too much but is there a way to make it slider product grid like in PRESTIGE Theme? Thank you!

a.png

0 Likes
UmairA
Shopify Partner
872 85 173

Hi @assaaa112 ,

Happy to help. You can increase the width to 50% and it will be centered. 

For the slider, it's a custom solution and will probably require an hour or so. Please email me if you need my help with that.

Thanks

Umair Abbas

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
Ana_Buendia
Excursionist
16 0 5

Hi, it worked, but some of the product names are too long causing some rows to have just one item, as you can se in the picture. What can I do @UmairA ? Thanks 

IMG_83C09EBD8868-1.jpeg

 

UmairA
Shopify Partner
872 85 173

Hey @Ana_Buendia,

Are you able to provide your store URL?

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
dearlittlepair
New Member
1 0 0

Hi there, I am facing the same issue as well. Please help

0 Likes