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 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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