Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


brunnatorino
Go to solution Solved by tuanphan,

Question

  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

14 answers to this question

Recommended Posts

  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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

Link to post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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/

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
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

Screenshot 2020-11-10 at 15.50.24.png

Link to post
  • 0
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?

Link to post
  • 0
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?

Screenshot 2020-11-11 at 14.08.58.png

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...