If you want to make your blogs to look like below image
Then you just need to follow steps;
Step 01
First, make a blog module as a full-width blog. Then add a class to this blog module. In my case, I have added a class “lt_news_blog” and save this module and head towards Divi Theme CSS section.
Step 02
In this step we will do styling. Copy below mention CSS and put it in your theme CSS
.lt_news_blog article {display:inline-block;width:47%;position:relative;padding:50px; height:235px; overflow:hidden; text-align:center;}
.lt_news_blog article:first-child {margin-right:55px;}
.lt_news_blog article .entry-featured-image-url {position:absolute;top:0px;left:0px;}
.lt_news_blog article:hover .entry-featured-image-url {opacity:0.8;}
.lt_news_blog article .entry-title,
.lt_news_blog article .post-meta,
.lt_news_blog article .post-content {position:relative;z-index:99;}
@media only screen and (max-width:1300px) and (min-width:800px) {
.lt_news_blog article {width:46%;}
.lt_news_blog article .post-content {height: 20px; overflow: hidden;}
}
@media only screen and (max-width:800px) {
.lt_news_blog article:first-child {margin-right:0px;}
.lt_news_blog article {width:100%;height:140px;}
.lt_news_blog article .post-content {display: none;}
}
And that’s it 🙂
Let me know in comments if any issue appears.
Note: In this tutorial I have given a specific height to each blog so that layout remains intact. Adjust height in your website as per your requirement.
Recent Comments