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

Items per row CSS


Clarisa

Question

Hi there,

I am trying to change the number of items per row in one of my product pages, does anyone know the code that I need to use?  and also how to inject it?  of course I do not want to modify all the product pages, just one of them.

Thanks!

 

Link to post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

I want to be able to change the items per row to 4 items in some of the product pages but not in all of them. Thanks    

Posted Images

9 answers to this question

Recommended Posts

  • 0
On 1/14/2020 at 3:25 AM, Clarisa said:

Hi Tuanphan,

This is the page https://www.thetinnedfishmarket.com/shop-hampers

The other product pages are hidden until I find out how to change the number of items per row.

Thanks

 

you want ? items per row???

Link to post
  • 0
On 1/27/2020 at 9:30 PM, Clarisa said:

I want to be able to change the items per row to 4 items in some of the product pages but not in all of them.

Thanks

 

 

Add to Page Settings > Advanced > Header

<style>
  /* 4 items per row */
  @media screen and (min-width:901px) {
  .ProductList-item {
    width: 24% !important;
    margin: 0 0 18px 0 !important;
    padding-right: 10px !important;
}
  }
</style>

 

Link to post
  • 0
On 2/1/2020 at 1:07 PM, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  /* 4 items per row */
  @media screen and (min-width:901px) {
  .ProductList-item {
    width: 24% !important;
    margin: 0 0 18px 0 !important;
    padding-right: 10px !important;
}
  }
</style>

 

Thank you!!  Will test it in a few days. xx

Link to post
  • 0
On 2/1/2020 at 1:07 PM, tuanphan said:

Add to Page Settings > Advanced > Header


<style>
  /* 4 items per row */
  @media screen and (min-width:901px) {
  .ProductList-item {
    width: 24% !important;
    margin: 0 0 18px 0 !important;
    padding-right: 10px !important;
}
  }
</style>

 

Hello again,

 

I tried the code but it leaves the product page like this... am I doing something wrong??

Screen Shot 2020-02-11 at 20.58.26.jpg

Link to post
  • 0
On 2/12/2020 at 4:01 AM, Clarisa said:

Hello again,

 

I tried the code but it leaves the product page like this... am I doing something wrong??

Hi. I checked again. Edit above code to this

<style>
  /* 4 items per row */
  @media screen and (min-width:901px) {
  .ProductList-item {
    width: 24% !important;
    margin: 0 0 18px 0 !important;
    padding-right: 10px !important;
}
    .ProductList .ProductList-item:nth-child(3n+1) {
    clear: unset;
}
  }
</style>

 

Link to post
  • 0
On 2/13/2020 at 1:11 PM, tuanphan said:

Hi. I checked again. Edit above code to this


<style>
  /* 4 items per row */
  @media screen and (min-width:901px) {
  .ProductList-item {
    width: 24% !important;
    margin: 0 0 18px 0 !important;
    padding-right: 10px !important;
}
    .ProductList .ProductList-item:nth-child(3n+1) {
    clear: unset;
}
  }
</style>

 

Hello Tuanphan,

Thank you so much for trying to help. However it keeps doing the same. Any other tweak you can think of?

Clari

 

 

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