Items per row CSS

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!

Can you share link to that product page?

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

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

On 1/18/2020 at 11:45 AM, tuanphan said:

you want ? items per row???

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

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>

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

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

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>

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