Narrative - How to add more rows to product page on mobile version

Store Design
1

Hi, I love the look of the Narrative theme on Shopify, however, it will only show one product on the product page per row (not 2 or 3 in a row). How can I fix this?? Thank you!

1 Like
2

@shayla_1

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

https://shopwanderlustinteriors.com/
Wanderlust Interiors l HOMEWARES I MOROCCAN INTERIOR I CUSHIONS
Welcome to Wanderlust Interiors. We are a boutique online interior & homewares store. With a love for travel & a passion for interior, we ethically source handmade pieces from all over the globe.
shopwanderlustinteriors.com

4

@shayla_1

do you mean like this?

KetanKumar_0-1622514721249.png
KetanKumar_0-1622514721249.png1920×1080 584 KB

5

Yes like that 2 or 3 rows with space in between. When I tried to do it the rows didn’t align etc.

What code did you use to get that?

6

hello @shayla_1

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

@media screen and (max-width: 769px){
.template-collection .card-list__column {
	    display: flex;
           flex-wrap: wrap;
}
.template-collection .card.critical-clear{
	     flex: 0 0 50%;
	     padding:10px;
}
}
1 Like
7

@shayla_1

thanks for detail please add 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 screen and (max-width: 749px) {
.card-list__column {display: flex;flex-wrap: wrap;}
.card-list__column .card {width: 50%;padding: 0px 5px;}
}
8

Hello Ketan,

I am using BROOKLYN theme, I have similar issue… my products/catalog shows one product on mobile screen and need to scroll up or down to see the next products. I see some other sites having 4 products displayed on mobile which i feel good to have feature.

I have incorporated the code you have recommended above … but I still see only one product and I still have to scroll up or down for next one. I am not sure what I am doing wrong. Please help. Appreciate your quick response.