How to Create Two Column Collection Pages on Brooklyn Theme mobile

Solved
chloecreativest
Tourist
16 0 1

Hey there - I am trying to create two columns on the mobile version collection pages for Brooklyn theme. How do I go about doing this?

 

Preview link is here - https://iqytlynvrtb34l41-3053912131.shopifypreview.com

KetanKumar
Shopify Partner
20467 2116 7715

@chloecreativest 

Thanks for post

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 768px) {
#CollectionSection .grid__item {
    width: 50%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
chloecreativest
Tourist
16 0 1

@KetanKumar I pasted that code in timber.scss and on Mobile, there is still only one column displaying - see here - https://iqytlynvrtb34l41-3053912131.shopifypreview.com

0 Likes
KetanKumar
Shopify Partner
20467 2116 7715

@chloecreativest 

above code apply on collection page

do you need also home and collection?

can you please add me staff so i will quick fix

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
chloecreativest
Tourist
16 0 1

Do I apply on collection.liquid?

0 Likes
KetanKumar
Shopify Partner
20467 2116 7715

@chloecreativest 

YEs

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
chloecreativest
Tourist
16 0 1

Hmm.. did not work. Anywhere else I should add it to?

0 Likes
KetanKumar
Shopify Partner
20467 2116 7715

This is an accepted solution.

@chloecreativest 

i have done this, please check

KetanKumar_0-1608100024060.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Komronr
Tourist
3 0 3

@KetanKumarthanks, your solution works but for some reason on my website two items at the bottom of the page have empty space next to them. No items are missing, it's just empty space. Could you please help?

Komronr_0-1623549424730.png

 

KetanKumar
Shopify Partner
20467 2116 7715

@Komronr 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing