Change mobile product view for Brooklyn Theme

Solved
WinstonT
New Member
8 0 0

Hello,

 

New to the shoplift forum. 

 

I'm currently using the Brooklyn theme - I like the overall feel however, I do not particularly find that the mobile version is optimized for mobile viewing experience. I do however, really like how the Debut theme has setup their mobile side to view products (see below):

 

Screen Shot 2019-06-21 at 12.08.15 AM.png

The mobile view for products in the Debut theme is very simple but effective I find. In the Brooklyn theme, in the mobile side it displays the products in a "stacked" view and I find it's not very pleasant. You'd have to scroll all the way down to view every item. 

 

Can anyone please help/advise on how I can code the Debut theme style for product display in the mobile viewing into the Brooklyn theme for mobile? I did go through several of the other posts in the community but was not able to find a solution for my problem.

 

Please let me know if there are any questions or concerns with my inquiry. 

Replies 37 (37)
humanity
New Member
1 0 0

This didn't work for me 😞 could you please help me??

malk
Tourist
12 0 1

Can you please help me out? I really want to show more than one product at a time on mobile. My website is www.shopmalk.com. Thank you! 

Jasoliya
Shopify Expert
4461 574 1119

Hi @malk 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 @media only screen and (max-width: 767px) {
.grid-uniform .grid__item.grid-product{    width: 50%;}        
    }
Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
malk
Tourist
12 0 1
Thank you so much!! That did work but now I get random blank spaces next to some items. I’m attaching a screen shot. Can you please take a look? Thank you!!

malk
Tourist
12 0 1

Thank you so very much! Can you please let me know how to get rid of random blank spaces that I get next to some products? IMG_8658.PNGIMG_8657.PNG

Jasoliya
Shopify Expert
4461 574 1119

Add this code:

@media only screen and (max-width: 767px) {
.grid-uniform .grid__item.grid-product:nth-child(2n+1) {
    clear: both;
}}

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
malk
Tourist
12 0 1

Awesome, that worked! Thank you so so much!!! 

THCLLC
New Member
2 0 0

@Jasoliya Hello, I have the minimal theme and I'm also just trying to have the featured products on a grid view instead of stacked. On desktop its grid view but changes to stacked on mobile can you help my URL is thehustlersculture.com

Jasoliya
Shopify Expert
4461 574 1119

I can see you have already grid view on home page for feature product section.

Best regard 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
THCLLC
New Member
2 0 0
Yea I just kept trying different sequences and finally got it right.
Adam_McLoughlin
Tourist
12 0 3

@Jasoliya This worked great for my product page on mobile!!

I was wondering if there was a similar code update that could be done in order to also make the 'frontpage' collection images half size on mobile? Currently my Popular Products collection which is featured on the homepage, still has full size images on mobile so only one product per width of the screen.

Thanks!

Jasoliya
Shopify Expert
4461 574 1119

send me store url

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Adam_McLoughlin
Tourist
12 0 3
Adam_McLoughlin
Tourist
12 0 3

@Jasoliya any luck? Thanks!

Jasoliya
Shopify Expert
4461 574 1119

so you want to make 2 product per row in mobile for feature collection section ?

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Adam_McLoughlin
Tourist
12 0 3

Yeah that’s correct…if possible? I have 6 products in the ‘popular products’ section and thought it may look better on mobile if there were 2 side by side rather than currently it’s a large single product that you have to scroll down through. 
if not possible, no worries!

Jasoliya
Shopify Expert
4461 574 1119


1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file

@media only screen and (max-width: 767px) {

#CollectionSection .grid-uniform .grid__item{width: 50% !important;}

}

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Tadiwanashe
New Member
1 0 0

Hey can i get help for the same thing? i already tried pasting those codes. Please help! i would appreciate it my store is 

www.afroodrip.com

 

i am trying to put products 2x2 grid (side by side).