Jump to content

Items per row CSS

Recommended Posts

  • Replies 9
  • Views 1.9k
  • Created
  • Last Reply
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???

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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 comment
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 comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.