Changing the number of product columns on Brooklyn Theme's mobile view

Highlighted
New Member
3 0 0

I am using the Brooklyn theme, and while I was able to figure out how to adjust the number of columns my products appear as (in grid format), I can't find the code to do the same in the mobile view. On the mobile view, the preview images of my products appear as a single column, which makes the images way too large for it to be user-convenient, since they would have to scroll down forever. If anyone can point me to where this particular code might be at, it would be greatly appreciated. 

0 Likes
Highlighted
Shopify Partner
1166 32 213
@media only screen and (max-width: 480px){
  .grid__item{
   width: 50%;
 }
}

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
New Member
3 0 0

Could you also point me to which template/asset this code is at? Thanks!!

0 Likes
Highlighted
Shopify Partner
1166 32 213

Paste it at the very bottom of your theme.scss.liquid

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
Tourist
16 0 2

Thanks heaps for your reply mate.

Followed your instructions - which worked, almost.

Some rows are only showing 1 product - others showing two.

Please check here.

Thanks!

0 Likes
Highlighted
New Member
1 0 0

Hi!
I'm using Brooklyn theme and would like to make 2 colums visible on mobile version of the shop. I'm search the forum and found this the above solution

I added the code at the end of theme.scss.liquid

However when I do that it shows the products cramped on the left side of the screen, not using the right side at all. How can I make it correct? 

Thanks!

 

0 Likes
Highlighted
New Member
3 0 0

I'd love this to work for me too if Lixon could help out?

0 Likes
Highlighted
Shopify Partner
1166 32 213

@Alexandra do you mean change the columns to 2 instead of 3 in mobile?

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
New Member
3 0 0

i get the same thing. After that code. I get 2 columns in mobile (great) but in the product page. All the info is cramped to the left

0 Likes
Highlighted
Tourist
18 0 2

in my case, the code results in the 2 products in the first row, 1 prodcut in second row (right aligned), 2 products in third row, 1 product in fourth row (left aligned)
so there are gaps in the mobile look.

the all products page is good though, in grid, or in collage.

I do like the collage arrangement on the homepage.

do you know if its possible to see the collage on the mobile version?

0 Likes