Products per row on mobile version of site

Site URL: https://www.buriedantenna.com

My site uses the Avenue template, I have a store page as my homepage, and I want it to display 2 products per row on the mobile version of the site, and 3 products per row on the tablet and desktop versions. I really don't like how the mobile version of the site looks at the moment, but to save people from eyestrain, I suppose I should use it. But, I'd like it too look reasonable, so any help with this would be greatly appreciated.

Add to Home > Design > Custom CSS

@media screen and (max-width:700px) {
div#productList {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 20px;
    grid-row-gap: 5px;
}
}

Thank you very much, Tuanphan! That worked! One thing thing though— there is an uneven number of products and it seems to be placing the gap (the area where an additional product would be) at the top of the grid, rather than the bottom. Anything you can do to fix that?

On 5/28/2020 at 9:02 PM, buriedantenna said:

Thank you very much, Tuanphan! That worked! One thing thing though— there is an uneven number of products and it seems to be placing the gap (the area where an additional product would be) at the top of the grid, rather than the bottom. Anything you can do to fix that?

Edit to

@media screen and (max-width: 700px) {
    div#productList {
        display:grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-column-gap: 20px;
        grid-row-gap: 5px
    }
  div#productList:before {
      display: none;
  }
}

And... that worked too. You're a genius! Thank you!