Jump to content

Increasing Jasper Jin index grid to a row of 4 columns

Recommended Posts

  • Susana_SQSP changed the title to Increasing Jasper Jin index grid to a row of 4 columns
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

@media screen and (min-width:901px) {
.index-list.clearfix {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 20px 20px;
}
.index-list.clearfix>div {
    width: 100% !important;
}
.index-list.clearfix:before {
    display: none;
}
}

 

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
  • 6 months later...
On 12/18/2022 at 2:09 AM, Kolea said:

Still the same outcome?

Screenshot 2022-12-17 at 19.08.49.png

Can you add & keep the code in CSS box? We can check it again easier

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
13 hours ago, Kolea said:

Seems to be working now. Is there a way to change corner radius and aspect ratio of the 4 row index?

Add this CSS under

article.index-item.has-item-image, .index-section {
    border-radius: 30px;
}

 

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 12/22/2022 at 9:02 PM, Kolea said:

Thank you so much! Just one more, how do I change the aspect ratio of the index grid to widescreen instead of square? 

16:9 Widescreen or Ultra Widescreen?

image.png.8a381705f2add784fecc998ad8370eb6.png

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

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.