Jump to content

Change items per row in product pages. Clay.

Recommended Posts

Add to Page Settings > Advanced > Header

  • 4 items/row: width: 25%
  • 5 items/row: width: 20%
  • 6 items/row: width: 16,666%
  • ...
<style>
  @media screen and (min-width:992px) {
  .ProductList-item {
    width: 25% !important;
}
.ProductList .ProductList-item:nth-child(3n+1) {
    clear: none !important;
}
  }
</style>

 

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
On 4/18/2020 at 2:25 PM, tuanphan said:

Add to Page Settings > Advanced > Header

  • 4 items/row: width: 25%
  • 5 items/row: width: 20%
  • 6 items/row: width: 16,666%
  • ...

<style>
  @media screen and (min-width:992px) {
  .ProductList-item {
    width: 25% !important;
}
.ProductList .ProductList-item:nth-child(3n+1) {
    clear: none !important;
}
  }
</style>

 

Thank you!  It works.

The only thing is that the items are not in the centre and the space in the right is bigger.

Any idea how to fix it?

Thanks in advance

 

 

Screen Shot 2020-04-22 at 12.23.04.png

Link to comment
33 minutes ago, Clarisa said:

Thank you!  It works.

The only thing is that the items are not in the centre and the space in the right is bigger.

Any idea how to fix it?

Thanks in advance

 

 

 

Can you keep the code & share url again?

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

If you use 45%

Edit

.ProductList-item {
    width: 45% !important;
    margin: 0;
}

and add

@media screen and (min-width:992px) {
.ProductList-item:nth-child(2n+1) {
    margin-right: 10%;
}
}

 

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
On 4/23/2020 at 3:49 PM, tuanphan said:

If you use 45%

Edit


.ProductList-item {
    width: 45% !important;
    margin: 0;
}

and add


@media screen and (min-width:992px) {
.ProductList-item:nth-child(2n+1) {
    margin-right: 10%;
}
}

 

At the end I went for the 4 items per row, I am using 20% , would this be the correct code:

 

<style>
  @media screen and (min-width:992px) {
  .ProductList-item {
    width: 20% !important;  margin: 0;
}
.ProductList .ProductList-item:nth-child(3n+1) {
    margin-right: 10%;
}
  }
</style>

 

Thanks in advance!

 

Link to comment
  • 7 months later...
On 12/1/2020 at 3:33 AM, marionlesso said:

Hi @tuanphan

I'm trying to follow the previous tips you gave regarding this. I'm also trying to force one of my product page to showcase only 2 items per row. However the code doesn't work for me 😕 
Do you any idea how I can do?

https://www.onelovelash.com/education
Code Onelovelash2020

Thanks in advance 😉

Add to Home > Design > custom CSS

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

 

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
7 hours ago, tuanphan said:

Add to Home > Design > custom CSS


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

 

Thanks, but I'm actually trying to force one "store" to showcase 2 items per row, and another 3 per rows. 

The way I build the website is one store = 1 category (as I didn't want to build with categories). 
But when I edit for example education so it shows 2 product per row, then it change all the other. 

Thanks already for your time and tips 🙂

Link to comment
  • 1 month later...
On 1/5/2021 at 10:36 PM, KEWALJULLE21 said:

I'm looking to comply with the previous tips you gave regarding this. I'm also trying to pressure one in every of my product page to show off simplest 2 items in keeping with row. However the code doesn't paintings for me

If you share link to your site, we can help easier

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
On 12/4/2020 at 2:18 AM, marionlesso said:

Thanks, but I'm actually trying to force one "store" to showcase 2 items per row, and another 3 per rows. 

The way I build the website is one store = 1 category (as I didn't want to build with categories). 
But when I edit for example education so it shows 2 product per row, then it change all the other. 

Thanks already for your time and tips 🙂

Add to Page Header

<style>
  @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>

 

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.