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

[umuttig37]

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.

@pioneer100 @KetanKumar 

[KetanKumar]

@umuttig37 

can you confirm this look!

[umuttig37]

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

[KetanKumar · Accepted solution]

@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;
}
}

[umuttig37]

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

[KetanKumar]

@umuttig37 

its my pleasure to help us