Gaps between products after changing number of products per row Brooklyn

Highlighted
New Member
1 0 0

Hello!

 

I'm hoping someone can help me out with this problem that I can't seem to figure out --

 

I'm on the Brooklyn theme and I edited the product-grid-item liquid so that I'd get 2 products per row on mobile, and 5 products per row on desktop. The problem is.... everything looks great on desktop, but for some reason I get gaps between the product listings on mobile. I went back and re-uploaded the product images to make sure they're all 800x800, but the problem still persists. I've included the code below. If you need PW access let me know :)

 

gaps.jpg

 

product-grid-item.liquid 

 

The code is now: <div class="grid__item grid-product one-half medium--one-quarter large--one-fifth{% if sold_out %} is-sold-out{% endif %}">

  <div class="grid-product__wrapper">

 

This was previously was {{ grid_item_width }} but changed to be able to show 2 items in a row in mobile and 5 items in a row in desktop)

0 Likes
Highlighted
New Member
2 0 0

Did you get a solution to your problem.

If so please share.

 

Thank you

0 Likes