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

[Novaque]

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

[KetanKumar · 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%;
}
}

[Novaque]

Thank you! Works perfectly.

[KetanKumar]

@Novaque 

it's my pleasure to help us

[Majj]

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. 

[KetanKumar]

@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.

[rhs888]

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]

@rhs888 

oh, sorry for that can you please share store url 

[rhs888]

ryanchristianjewelry.com

[KetanKumar]

@rhs888 

yes please add this code

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

[rhs888]

Thank you so much!