Collection pages mobile view - Brooklyn theme

Highlighted
Excursionist
12 0 2

Hello, 

I would like to have the mobile version of my theme to show two products instead of one in the collection pages. I have already changed the grid style to grid under the theme settings, but it only works for the desktop version. I have followed the steps in the website below which involves going to edit code and snipets, but that has not worked for me. https://community.shopify.com/c/Technical-Q-A/Brooklyn-theme-mobile-veiw-display-two-product/m-p/668...

Your help is very much appreciated. 

Kindest regards, 

Erick

1 Like
Highlighted
Shopify Partner
4447 667 1390

Hello, @F09 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide 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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
12 0 2
0 Likes
Highlighted
Shopify Partner
4447 667 1390

@F09 

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

@media screen and (max-width: 590px) {
.collection-collage__item.one-half {
    height: 130px;
    width: 100%;
}
}

 

 

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
12 0 2

Hi @KetanKumar 

 

I have pasted the code below and ready for the next step. I forgot to mention in my initial posting. I followed the steps on https://community.shopify.com/c/Technical-Q-A/Brooklyn-theme-mobile-veiw-display-two-product/m-p/668... and since it did not work I reverted those changes to the original code. Should I follow those steps again? Not sure if the code you provided me with is in combination with the steps on that URL.

 

0 Likes
Highlighted
Shopify Partner
4447 667 1390

@F09 

you can just add above css code no more code required this issue

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
12 0 2

@KetanKumar  

Thank you for the help. I see that it worked in the home screen (which is great!). However, when I click on the collections and it brings the products, only one product is displayed per row. I would like to have two products per row. I really appreciate your help with this :) 

0 Likes
Highlighted
Shopify Partner
4447 667 1390

@F09 

Thanks for update.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
12 0 2

@KetanKumar 

Sorry for not being so clear. I guess my question is, can you help me put two products per row (on mobile) once I click on the collections? 

0 Likes
Highlighted
Shopify Partner
4447 667 1390

@F09 

@media screen and (max-width: 590px) {
#CollectionSection .grid-product__title {
display: block;
    min-height: 73px;
}
#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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like