How do I increase products per row on mobile in Brooklyn theme to 2?

Store Design
41

Thanks @KetanKumar !

The URL is the following: myeasycharge.com

Thanks for the fast reply.

42

@1405k

thanks for store url, yes please add this code.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
#shopify-section-collection .grid__item {
    width: 100%;
}
}
43

Thanks @KetanKumar

I am not sure I did it right because now, the products are displayed one-by-one.
It might be for two reasons; I added the line of code to asset>theme.css.liquid (and not theme.css, I only found .css.liquid). Second I was not sure where to paste it so I did it on top of the file.

Do you know why that might be? Thanks for your help!

44

@1405k

yes, please add your css file

45

@KetanKumar I just sent you an email.
Thank you very much for your help.

46

@1405k

ok, Thanks i will check and update

47

Hello,

Can someone please help with changing the mobile collection’s display to 2 products per row?

My URL is thetechjar.com and I am using the Trademark theme.

Thanks!

48

Hello there @KetanKumar

Wish you a lovely new year,

I am using the Brooklyn theme and wanted to have my products appear 2 in a row on the mobile. I saw a code posted and I used it. as you can see below. I just noticed that not all of them appear in rows. Is this normal? Like there is an empty space. Please see the attached picture.

https://shathadafai.com/collections/all?sort_by=manual

IMG_3962.jpg
IMG_3962.jpg1125×2436 180 KB

Your help is appreciated.

Kind Regards,

Shatha

49

@shatha_1

oh sorry that issue 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.

#CollectionSection .grid-uniform {
display: flex;
flex-wrap: wrap;
}

50

@KetanKumar IT WORKED! Thank you so much.

51

@shatha_1

its my pleasure to help us

52

hi @KetanKumar

I want to know how I can add rows on my shopify page when it’s mobile. I wanna make 2 products shown on 1 row.

my store URL is https://simplify.fashion/

and the themes is Narrative.

Thank you.

53

@mainonakajima

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.card-list__column .card {
    width: 50%;
}

.card-list__column {
    display: flex;
    flex-wrap: wrap;
}

.card-list__column .card .card__wrapper--padding {
    padding: 10px;
}

.card__info {
    padding: 10px;
}
54

It worked! Thank you so much!!

Also, can I ask how I can put those 2 gallery images(attached image) in 1 row on Home page?

Screen Shot 2022-01-06 at 22.49.05.png
Screen Shot 2022-01-06 at 22.49.05.png868×1258 271 KB

55

@mainonakajima

yes, please show me

56

it’s on this page! https://simplify.fashion/

57

@mainonakajima

its work on mobile

58

hi @KetanKumar

It shows one image per row on both mobile and desktop. How can I change it?

59

Hello @KetanKumar

can you also provide a solution for the DAWN theme?

URL: https://testshop-reg.myshopify.com/, Password: lauwia

Many, many thanks in advance!

60

@RegiSchob

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-collection-list.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
    width: calc(50% - 3rem);
}
}