Add more columns to product page on mobile - Narrative Theme

Store Design
1

I’d like to add more columns to my product pages. On the mobile site there is only one column and it takes a long time to scroll down through each product. My website is charlottejstudio.com. Click on menu and select Shop All/ Rings / Earrings etc to see what I mean. Thanks!

1 Like
2

@charlottehep12

sorry for any if possible to share issue image so i will check and guide

3

Hi @KetanKumar

See in the photo there is only one column to scroll down each product. I’d like there to be 2 columns so it looks more like a grid and you can see multiple products at once. See other photo for an example of what I want. Thanks!

7FA1FD4D-70BB-4B7D-AABE-0FC75B5F84E3.jpeg
7FA1FD4D-70BB-4B7D-AABE-0FC75B5F84E3.jpeg1170×2154 112 KB

F6388786-53BA-4114-BBFC-E15F2095F23D.jpeg
F6388786-53BA-4114-BBFC-E15F2095F23D.jpeg1170×1532 82.1 KB

1 Like
4

@charlottehep12

thanks for the clear can you 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 .card {width: 50%;padding-left: 15px;}
.card-list__column {display: flex;flex-wrap: wrap;margin-left: -15px;}
}
5

@KetanKumar

thank you, it worked but it is off centre. See photo

3A061AE0-CA4A-403F-B003-32BF0A7F7DD1.png
3A061AE0-CA4A-403F-B003-32BF0A7F7DD1.png1170×2532 223 KB

1 Like
6

@charlottehep12

oh sorry can you remove first one after add this code

@media only screen and (max-width: 749px){
.card-list__column .card {
    width: calc(50% - 15px);
    margin: 0px 7px;
}
.card-list__column {display: flex;flex-wrap: wrap;}
}