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

Squarespace 7.1, how to make the product list show 2 columns on mobile view instead of 1...solved.


MiridiosII

Question

@media only screen and (max-width: 767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 2vw;
    grid-row-gap: 4vw;
    padding: 0;
  }
}

On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))".  If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@media only screen and (max-width: 767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 2vw; grid-

5 answers to this question

Recommended Posts

  • 0
On 12/19/2020 at 8:03 PM, MiridiosII said:

@media only screen and (max-width: 767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 2vw;
    grid-row-gap: 4vw;
    padding: 0;
  }
}

On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))".  If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.

Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above.  Will this work for only certain styles provided by squarespace? 

 

Link to post
  • 0
On 12/24/2020 at 4:20 AM, SMXTH said:

Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above.  Will this work for only certain styles provided by squarespace? 

 

Can you share site url? We can help easier

Link to post
  • 0
On 12/23/2020 at 9:20 PM, SMXTH said:

Im still having issues displaying the product grid to show more than 2 columns instead of 1 using the code above.  Will this work for only certain styles provided by squarespace? 

 

Hello! I'd also like to solve this, i'm in the early stages of creating my site and currently on mobile it shows 1 product at a time stacked. When I enter the code nothing changes. My site is: www.sundayclubapparel.com thank you!

Link to post
  • 0
On 1/8/2021 at 10:29 PM, sundayclubapparel said:

Hello! I'd also like to solve this, i'm in the early stages of creating my site and currently on mobile it shows 1 product at a time stacked. When I enter the code nothing changes. My site is: www.sundayclubapparel.com thank you!

Add to Settings > Advanced > Code Injection > Header

<style>
  /* Product 2 columns mobile */
@media screen and (max-width:767px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}
</style>

 

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