How to have 2 columns on the product page on mobile?

Site URL: http://araraswim.nl

Hello all,

I would like the mobile version of my website to have two columns on the product pages instead of one.

How could I do this? thank you very much in advance.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}
}

@tuanphan

I have the same desire (two columns in mobile view for all 4 stores on my site) as brunnatorino but your code does not work for my site. Could you perhaps point me in the right direction? 

Site: www.whiskycaskpens.com 

14 hours ago, RoryThomson said:

@tuanphan

I have the same desire (two columns in mobile view for all 4 stores on my site) as brunnatorino but your code does not work for my site. Could you perhaps point me in the right direction? 

Site: www.whiskycaskpens.com 

Your Custom CSS Box has syntax error so the above code won't work unless fix syntax. Can you paste all CSS here?

On 4/15/2020 at 5:09 AM, tuanphan said:

Your Custom CSS Box has syntax error so the above code won't work unless fix syntax. Can you paste all CSS here?

Hey 

The code doesn't work for me but I don't have any other code in my custom css box. Do you possibly know what the problem might be?

https://www.nyane.co/shop

On 10/18/2020 at 4:08 PM, fhillm said:

Hey 

The code doesn't work for me but I don't have any other code in my custom css box. Do you possibly know what the problem might be?

https://www.nyane.co/shop

i see you solved. Do you still need help?

On 4/10/2020 at 1:59 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products .list-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}
}

 

I have tried to use this on my site, but it doesn't seem to work when I posted in the custom CSS section. Am I missing something?

My site is: https://retroralph.uk/

On 11/7/2020 at 12:03 AM, yourfluf said:

I have tried to use this on my site, but it doesn't seem to work when I posted in the custom CSS section. Am I missing something?

My site is: https://retroralph.uk/

Please try again. I just test & it works here.

1 hour ago, tuanphan said:

Please try again. I just test & it works here.

As you can see, I have tried again and refreshed the page. It still only has one column

Above code for shop page. You want 2 columns product on homepage?

14 hours ago, tuanphan said:

Above code for shop page. You want 2 columns product on homepage?

Yes please, on my home page

1 minute ago, yourfluf said:

Yes please, on my home page

There was an error with displaying a grid on my home page, so I inserted individual product blocks instead. I would like these to display in two columns instead of one. Is this possible?

Add to Home > Design > Custom CSS

/* home products */
@media screen and (max-width:767px) {
div#page-section-5f29775108f9fc5eade7bb77>.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

2 minutes ago, tuanphan said:

/* home products */ @media screen and (max-width:767px) { div#page-section-5f29775108f9fc5eade7bb77>.row>.span-3 { width: 50% !important; float: left !important; } }

Thank you!! 

How can I change the padding to match the grid below?

20 hours ago, yourfluf said:

Thank you!! 

How can I change the padding to match the grid below?

Use this code

/* home products */
@media screen and (max-width:767px) {
div#page-section-5f29775108f9fc5eade7bb77>.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f29775108f9fc5eade7bb77 .product-block {
    padding: 5px !important;
}
}

I've been trying to figure this out for days with no avail until I came across this thread.  So I just wanted to say a massive thank you to @tuanphan for immediately solving this and restoring my brain to normal function!!  Happy New Year! x

Hi! 

Sorry, it isn't working on mine :( Can I ask for some advice?

I want to have 2 columns of products on the mobile version while exploring the shop.

Website: www.janeirocollective.com

Pass: vemverao21

(still private, preparing for launching)

On 3/29/2021 at 6:01 AM, Janeiro said:

Hi! 

Sorry, it isn't working on mine :( Can I ask for some advice?

I want to have 2 columns of products on the mobile version while exploring the shop.

Website: www.janeirocollective.com

Pass: vemverao21

(still private, preparing for launching)

It looks like you solved with this code?

@media screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 10px
    }
}

13 hours ago, tuanphan said:

It looks like you solved with this code?

@media screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 10px
    }
}

 

Indeed! Thank you very very much

On 3/30/2021 at 7:24 PM, tuanphan said:

It looks like you solved with this code?

@media screen and (max-width: 767px) {
    .products.collection-content-wrapper .list-grid {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 10px
    }
}

 

will this same code work for me if I want 3 or 4 columns while browsing my shop on mobile? Does this work with both 7.1 and 7.0 templates or only 7.0 templates?

6 hours ago, BULBASTORE said:

will this same code work for me if I want 3 or 4 columns while browsing my shop on mobile? Does this work with both 7.1 and 7.0 templates or only 7.0 templates?

7.1. - 7.0 needs different code

to make 3 or 4 columns, just change number 2 to 3 or 4

6 hours ago, tuanphan said:

7.1. - 7.0 needs different code

to make 3 or 4 columns, just change number 2 to 3 or 4

Any chance you could take a peak at my site and help me figure out how to make it 3 or 4 columns on mobile devices, I'd like to play with it and see which I like better. I'm using Brine which is 7.0. I've attempted numerous different code that I found you post for similar issues, but none of them seemed to do anything. Assuming they were for specific pages and sites, not universally accepted.

16 hours ago, BULBASTORE said:

Any chance you could take a peak at my site and help me figure out how to make it 3 or 4 columns on mobile devices, I'd like to play with it and see which I like better. I'm using Brine which is 7.0. I've attempted numerous different code that I found you post for similar issues, but none of them seemed to do anything. Assuming they were for specific pages and sites, not universally accepted.

Can you share your site url?

On 6/17/2021 at 10:39 AM, tuanphan said:

Can you share your site url?

Hi, 

I was researching how to change the number of columns to 3, on only one sales page. I'm using version 7.0, Brine template.

I noticed this question posted here. Is it possible for you to help me with the code for this page:

https://www.ijorere.com/ijorere-2-0

Thank you so much if you can.

On 3/17/2022 at 9:27 PM, Tinap358 said:

Hi, 

I was researching how to change the number of columns to 3, on only one sales page. I'm using version 7.0, Brine template.

I noticed this question posted here. Is it possible for you to help me with the code for this page:

https://www.ijorere.com/ijorere-2-0

Thank you so much if you can.

 

Add to Design > Custom CSS

/* Ijorere 20 mobile */
@media screen and (max-width:640px) {
body#collection-6233165380b20b5199526d0f {
section.ProductList div.ProductList-item.hentry.image-is-loaded {
    width: calc(33.3333% - 20px) !important;
    clear: none !important;
}
div.ProductList-item:nth-child(3n+1) {
    clear: left !important;
}}}