Step 1: Add the Blog module to the page, and ensure its layout is set to be Fullwidth in the module's modal settings window → Design Tab → Layout:
Step 2: In Advanced Tab → Custom CSS → Free Form CSS, copy/paste the following CSS code:
@media (min-width: 768px) {
selector article.has-post-thumbnail {
display: grid;
grid-template-columns: 30% auto;
grid-template-rows: repeat(4, auto);
gap: 0 20px;
}
selector article.et_pb_post {
margin-bottom: 20px
}
selector article.has-post-thumbnail .entry-featured-image-url {
grid-row: span 5;
margin-bottom: 0;
}
}
The result will be:
Code Explanation:
In the above code, we are using CSS Grid to create a custom 2 columns layout. The first column of the grid is 30 and it is used to display the Post's Featured Image. The second column will be as wide as the remaining space, and it is used to display the rest of the Post information:
Post's Title
Post's Meta
Post's Excerpt
Post's
read morebutton
If you want to use a different size of the Featured Image, edit this CSS property:
grid-template-columns: 30% auto;
And changed the 30% width value.
Note: In the above CSS code, we will notice a Warning Unknow property gap . Please ignore that warning. The warning shows due to the syntax checker of not able to recognize a perfectly valid CSS property gap.