How to Create Two Column Collection Pages on Mobile - Brooklyn Theme

Solved
Novaque
Tourist
9 0 3

Hi,

I am trying to change all of my collection pages (both on the homepage and all other pages) to have two columns on mobile.

I am using the Brooklyn theme but am unsure on what code needs to be changed/added to make the change.

If anyone could help, it would be greatly appreciated.

Site link - https://artizra.myshopify.com

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
35886 3585 11605

This is an accepted solution.

@Novaque 

sorry for this issue, please add this code

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

@media only screen and (max-width: 768px) {
#CollectionSection .medium--one-half {
    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

View solution in original post

Replies 10 (10)
KetanKumar
Shopify Partner
35886 3585 11605

This is an accepted solution.

@Novaque 

sorry for this issue, please add this code

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

@media only screen and (max-width: 768px) {
#CollectionSection .medium--one-half {
    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
Novaque
Tourist
9 0 3

Thank you! Works perfectly.

KetanKumar
Shopify Partner
35886 3585 11605

@Novaque 

it's my pleasure to help us

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
Majj
Explorer
52 0 10

Hi I'm on VENTURE theme. I tried the code above and it's not working on Mobile. I have 1 Column showing for my collections. 

For mobile view, I want to have two columns per row. 

Capture.PNG

 

 

KetanKumar
Shopify Partner
35886 3585 11605

@Majj 

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
rhs888
Tourist
5 0 2

I used the code and it works 90% fine for me. When I am on iphone and scroll down in a collection, I get empty slots where there should be an item there every so often. This problem does not happen when my phone is horizontal though. Do you know why this is happening? 

KetanKumar
Shopify Partner
35886 3585 11605

@rhs888 

oh, sorry for that can you please share store url 

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
rhs888
Tourist
5 0 2
KetanKumar
Shopify Partner
35886 3585 11605

@rhs888 

yes please add this code

#CollectionSection .grid-uniform {
    display: flex;
    flex-wrap: wrap;
}

 

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
rhs888
Tourist
5 0 2