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

Change items per row in product pages. Clay.

Question

Site URL: https://www.thetinnedfishmarket.com/hampers

Hi there,

I have different product pages in my site. I want to change the number of items per row in some product pages but not in all of them. The default settings allow you to adjust this number for all product pages only. Can someone tell me how can to change the items per row just in one product page?

Thanks in advance.

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
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!

 

Share this post


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