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

Solved
Highlighted
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
Highlighted
Shopify Partner
205 20 21

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

If helpful then please Like and Accept Solution
Want to hire me for only $20/hour (Or get a fixed quote)?
Contact Now At
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
New Member
3 0 0

Yes @UmairAbbas ! 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
Highlighted
Shopify Partner
205 20 21

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

If helpful then please Like and Accept Solution
Want to hire me for only $20/hour (Or get a fixed quote)?
Contact Now At
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes