Changing grid_item_width according to the display size. [Brooklyn]

Highlighted
New Member
4 0 0

Hello, I would want to change how many collections appear in a row depending if the user is on a mobile or on a desktop. ( On desktop 2 and on mobile 1 ) I understand liquid is a server side language so javascript cant be used to detect the device screen size. How would i go about doing this?

My site is giovanni-astro.com and im using the brooklyn theme.

Thank you in advance :)

0 Likes
Highlighted
Shopify Partner
1840 177 711

You control that with CSS classes and media queries for viewport breakpoints. You are using Brooklyn theme which includes a grid based layout and classes so it would be a easy adjustment.

For instance

<div class="grid">
  <div class="grid__item small--one-whole medium--one-half large--one-third">
    Item 1
  </div>
  <div class="grid__item small--one-whole medium--one-half large--one-third">
    Item 2
  </div>
  <div class="grid__item small--hide medium--hide large--one-third">
    Item 3
  </div>
</div>

Would mean that any screen width above 768px (large) will show all 3 items per row each 33% wide. Any screen width between 591px and 768px (medium) will only show the first 2 items per row each 50% wide and any screen width up to 590px will show first 2 items on "separate rows" each 100% wide.

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
2 Likes
Highlighted
New Member
4 0 0

Big thank you again! Im only starting to learn more complex html and css and now i understand how the different classes correspond to the media queries for viewport breakpoints in the css file. Ive learnt so much while making this site, anyway thanks again and my problem is solved ;)

0 Likes
Highlighted
New Member
1 0 0

Hi there, I have the opposite problem.... (Also on Brooklyn theme).
Currently on mobile version my collection pages show 1 product on every row (which means a lot of scrolling....). I'd like to change it to 2 products per row on mobile. When I tried to do this myself I ended up changing the width other sections on the website so definitely think I was digging around in the wrong parts. 
Please, if you know what I need to do, do let me know! Would be super appreciated!
Thanks!

0 Likes