Increasing Jasper Jin index grid to a row of 4 columns

Site URL: https://kolea.tv

Hi

I would like to increase my index grid to a row of 4 columns. Any help would be greatly appreciated.

Dave

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;
}
}

Doesn't seem to have worked?

On 12/11/2022 at 10:49 PM, Kolea said:

Doesn't seem to have worked?

Hi,

Try moving the code to top of CSS box

Still the same outcome?

On 12/18/2022 at 2:09 AM, Kolea said:

Still the same outcome?

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

Done. Let me know please.

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

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;
}

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

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?