Edit Collection List Sizing on Mobile View (Brooklyn Theme)

Store Design
1

Hi there, I am using the Brooklyn Theme for my website (www.blumorganics.com.au) and I would love to edit the size of my collection lists as they appear on mobile view (Brooklyn Theme). This is because as you can see, under the words “Shop our Collection”, “Aura Mists” is full-sized, whereas “Gift Packs” and “Blūm Mama” are condensed. I would like them to all be full sized if possible.

Here are some screenshots to show the difference:

MOBILE VIEW:

IMG_2147.PNG
IMG_2147.PNG1242×2688 246 KB

DESKTOP VIEW:

Screen Shot 2022-01-18 at 3.46.13 pm.png
Screen Shot 2022-01-18 at 3.46.13 pm.png2880×1366 216 KB

Any help would be greatly appreciated! Thanks so much

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (max-width: 575px){
div#shopify-section-featured-collections .wrapper .collection-grid .grid__item.one-half {
width: 100%;
}
}
1 Like
3

Hi @ZestardTech ! Thanks so much for giving me that code! It did partially work as they are all now the same widths, but slightly different heights (see screenshot below). Do you happen to know how to make them all the same height as the top one?

IMG_2149.PNG
IMG_2149.PNG1242×2688 276 KB

Thanks so much again for your help!

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (max-width: 575px){
div#shopify-section-featured-collections .wrapper .collection-grid .grid__item.one-half {
height: 190px;
}
}
1 Like
5

Thank you! I used both codes you provided together and the worked perfectly! Thanks so much!

1 Like
6

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.

1 Like