How do i get products look smaller on mobile? there is 1 product per row and its ultra big

Retired Boards Appdev Store Design
1

So i made page with narrative theme, and it looks good on desktop. But on mobile, its listing all products 1 per row, and its ultra big what look so bad. I will be very thankful if someone will help me.

it looks like this and i want 3 products per row.

Näyttökuva 2022-01-17 003133.png
Näyttökuva 2022-01-17 003133.png506×870 279 KB

@pioneer100 @KetanKumar

1 Like
2

@umuttig37

can you confirm this look!

KetanKumar_0-1642379063196.png
KetanKumar_0-1642379063196.png1920×1080 392 KB

3

yes, i would be really thankful all products will look like this on mobile.

4

@umuttig37

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.
@media only screen and (max-width: 749px) {
.card-list__column {
    display: flex;
    flex-wrap: wrap;
}

.card-list__column .card {
    width: 50%;
}

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

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

.card-list__column .card .card__wrapper--padding .card__info h3.card__name {
    font-size: 16px;
}
}
1 Like
5

Exactly how i wanted it to look, thank you so much! Saved my day

1 Like
6

@umuttig37

its my pleasure to help us