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

Solved
umuttig37
Tourist
3 0 2

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@pioneer100 @KetanKumar 

Accepted Solution (1)
KetanKumar
Shopify Partner
36719 3634 11911

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 5 (5)
KetanKumar
Shopify Partner
36719 3634 11911

@umuttig37 

can you confirm this look!

KetanKumar_0-1642379063196.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
umuttig37
Tourist
3 0 2

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

 

KetanKumar
Shopify Partner
36719 3634 11911

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
umuttig37
Tourist
3 0 2

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

KetanKumar
Shopify Partner
36719 3634 11911

@umuttig37 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing