Display products page in 2 columns on mobile

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.

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;
}
}

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!

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;
}
}

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!