Buy me a coffee

How to adjust display of blog posts with a big post on top and 2 column posts under

If you want to change blog page layout to this.

How To Adjust Display Of Blog Posts With A Big Post 01 Min

You can use this to Custom CSS box

/* Blog Page layout */
.blog-basic-grid .blog-basic-grid--container:first-child {
grid-column: ~"1 / 3";
}

How To Adjust Display Of Blog Posts With A Big Post 02 Min

If you want to apply this for a specific blog page, you can find the Blog Page ID.

In my example, we will have:

  • #collection-6677756d03a4f15ba27ce9d8

How To Adjust Display Of Blog Posts With A Big Post 03 Min

Next, use this CSS code

#collection-6677756d03a4f15ba27ce9d8 .blog-basic-grid--container:first-child {
    grid-column: ~"1 / 3";
}

How To Adjust Display Of Blog Posts With A Big Post 04 Min