Jump to content

Products per row on mobile version of site

Recommended Posts

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.

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

Link to comment
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;
  }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.