Jump to content

Items per row CSS

Recommended Posts

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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