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

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