How to Change Mobile Products Page View From Row to Grid?

Solved
IlluminateLabs
Explorer
104 0 12

Currently our Products page (https://illuminatelabs.org/collections/all) displays a row format on mobile (only one product occupies the entire screen).

This isn't great for UX.

I want to change this to a grid with two products occupying the screen horizontally. Should be a simple fix but I can't figure out how to do it and didn't see any similar question in the Shopify forums.

Theme is Brooklyn.

KetanKumar
Shopify Partner
18701 1968 6920

This is an accepted solution.

@IlluminateLabs 

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 screen and (max-width: 590px) {#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
IlluminateLabs
Explorer
104 0 12

@KetanKumar worked perfectly, thank you!

0 Likes
IlluminateLabs
Explorer
104 0 12

@KetanKumar one further question. With the new grid format, one of the product titles drops to two lines and throws off the visual aesthetic.

Is there a way to display a different product title for that one product for mobile devices below a certain viewport width threshold?

KetanKumar
Shopify Partner
18701 1968 6920

@IlluminateLabs 

no sorry it's not possible to display different product title

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
0 Likes