How can I display multiple products per row on mobile view?

Store Design
,
1

Hi,

The product images on desktop on our site looks perfect but we want to change the view on mobile view to show more than 1 product per row. Is there a way to do this? We are using the Portland theme.

2

@Meano94 , can you share your store url?

3

Sure, Thank you. It is currently still in development but the current URL is https://6aad2b-2.myshopify.com/

4

It requires a password.

5

Password is We_Believe_24/7

6

It says that the password is wrong.

7

Apologies i have reset the password, please try

liavaw

8

No problem, go to template-collection.css and add the following code :

.collection-product-list {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 2.4rem;
    row-gap: 4.8rem;
}
1 Like
9

Hi @Meano94

Please check in your section settings, it has option to select number of column on mobile

Screenshot 2023-11-16 at 14.00.47.png
Screenshot 2023-11-16 at 14.00.47.png1917×934 106 KB

10

Hi @Meano94

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

11

This worked!! Thank you so much!

1 Like