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
  • Replies 4
  • Views 695
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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