Brooklyn: how do I change collection list one image per row for mobile view

Solved
AndrewH94
Tourist
8 0 2

Hi there, been struggling with this for a while and would greatly appreciate any help I can get with this.

I've added 2 collections into the Collection List block on the homepage. In mobile view, the two collections are rather squashed together side by side, on deskop it's fine. Could someone guide me as to how I can turn this to 1 per row on mobile view? I.e. on top of each other rather than side by side

https://the-ice-cream-bar-malaysia.myshopify.com
password: andrew

AndrewH94_0-1626071949287.png

 

Thanks very much!

0 Likes
Pallavi
Shopify Expert
2188 355 466

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
div#shopify-section-162544785793f89bf0 .grid.collection-grid {
display: flex;
flex-wrap: wrap;
}

div#shopify-section-162544785793f89bf0 .grid.collection-grid .grid__item {
width: 100%;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
AndrewH94
Tourist
8 0 2

Thanks so much- lifesaver!

Pallavi
Shopify Expert
2188 355 466

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.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes