Brooklyn theme - products in two columns on mobile

Store Design
1

Hi everybody,

I’m working on my website now and I would like to have two products columns when I check my collection on mobile. One looks not so good.

My website url is enviestore.com

password: shoppass2021

Thank you

2 Likes
2

@LouisUser1

please Go to Online Store->Theme->Edit code then go to assets/timber.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (max-width: 590px) {
.large--one-third {
    width: 50%;
}

Thanks!

1 Like
3

@LouisUser1

yes please try 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 .medium--one-half {
    width: 50%;
}
}
3 Likes
4

thank you very much to both of you!

5

Dear @KetanKumar I added your code, which looks good but I have some issues in my products: some of my scrunchies/clips are not aligned or alone on their row, while other are together.

Do you think there’s a fix for that?

Thank you again

1 Like
6

hello @LouisUser1

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 589px){
.template-collection .grid-uniform{
    display: flex;
    flex-wrap: wrap;
}
}
1 Like
7

@LouisUser1

Yes, please add this code also

@media screen and (max-width: 590px) {
#CollectionSection .grid-uniform {
    display: flex;
    flex-wrap: wrap;
}
}
1 Like
8

Thanks to both of you! Now every products are on two columns, it looks great.

I have one small last request, some of my product’s names are randomly aligned, it makes it look a bit weird. Do you have any idea why is that so? Maybe names are too long?

It would be ideal to have every products names looking “aligned”

Thanks again!

1 Like
9

@LouisUser1

its my pleasure yes current product long name issue

1 Like
10

But if I change the name to a short one there is still some products not aligned. It fixed some but some looks like not at the same place at the other one on the same line.

is there something I could change in the code?

thank you

1 Like
11

@LouisUser1

can you please share issue image so i will guide you

12

Hi @KetanKumar sorry for the delay in my answer

mobileSITE.png
mobileSITE.png461×855 66.5 KB

As you can see on MOBILE:

  • first two products the names are the same length but one is one line, one is two lines (not aligned)

  • some names are not aligned, even if those names are short. You can see it on the second line with the “Lucy” product

It happens randomly on some products

If you know some way to fix those alignements it would be great.

I’m focusing on mobile since most of my customers are probably on mobile

Thank you very much

1 Like
13

no rush thanks for update

sorry but your store This site can’t be reached

1 Like
14

Sorry the domain had a small issue, it should be accessible now

15

@LouisUser1

great

i have check now is working url but sorry i can’t see any issue.

1 Like
16

Hi @KetanKumar

Actually while i was updating the products I realized that if a product didn’t have a second picture it was making the text not aligned.

So I just have to add to all of them a new picture.

I don’t have any problem anymore, thank you very much for all your help!

1 Like
17

@LouisUser1

Great, Thanks for update