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

Display products page in 2 columns on mobile


ChuckG-Art

Question

Site URL: https://www.chuckgumpert.com/merch-ccb

Hello,
I've seen many CSS fixes for this in the forum. 
But none seem to work with my site.  Is it only a 7.1 thing?  Is it not possible with Avenue template?

If the 2 column thing isn't a possibility, I'd alternatively like to add padding between products when viewed in one column on mobile.

Thanks in advance.

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0
21 hours ago, ChuckG-Art said:

Site URL: https://www.chuckgumpert.com/merch-ccb

Hello,
I've seen many CSS fixes for this in the forum. 
But none seem to work with my site.  Is it only a 7.1 thing?  Is it not possible with Avenue template?

If the 2 column thing isn't a possibility, I'd alternatively like to add padding between products when viewed in one column on mobile.

Thanks in advance.

Add to Design > Custom CSS > Then save & reload your site

/* mobile products 2 columns */
@media screen and (max-width:640px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

 

Link to post
  • 0
6 hours ago, tuanphan said:

Add to Design > Custom CSS > Then save & reload your site


/* mobile products 2 columns */
@media screen and (max-width:640px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

 

It worked!  
BUT any reason the first item in the first row starts in the SECOND column??
(first item in first column is blank space??)

Thanks!

tempFileForShare_20210415-133209.jpg

Link to post
  • 0
On 4/16/2021 at 3:56 AM, ChuckG-Art said:

It worked!  
BUT any reason the first item in the first row starts in the SECOND column??
(first item in first column is blank space??)

Thanks!

Hi. Remove above & add new code

/* mobile products 2 columns */
@media screen and (max-width:640px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
div#productList:before {
    display: none !important;
}
}

 

Link to post
  • 0
3 hours ago, tuanphan said:

Hi. Remove above & add new code


/* mobile products 2 columns */
@media screen and (max-width:640px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
div#productList:before {
    display: none !important;
}
}

 

Perfect!  Thanks so much!

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...