My site is giovanni-astro.com and im using the brooklyn theme.
Thank you in advance :)
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.
<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.
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!