Change items per row in product pages. Clay.

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.

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>

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

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?

On 4/22/2020 at 1:00 PM, tuanphan said:

Can you keep the code & share url again?

Thanks for your reply. I have changed the row to 2 (45%). You can see the extra space at the right. Will leave it for a while so you can have a look.

https://www.thetinnedfishmarket.com/hampers

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

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!

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 😉

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

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 🙂

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

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

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>