By default, the featured images of your blog posts in the Divi theme's blog module show big at the top of your blog posts' titles and extracts. These images are automatically stretched to the full width of your blog module. So, if your blog module takes e.g. 3/4 of your website's width, the images will be pretty big. Also, if they are smaller than that, they will be enlarged automatically and that may really not look nice. Below you can see an example of this from divitheme.net/blog.
There is a simple CSS trick that you can use to make the images smaller and aligned to the left of the posts' titles and extracts.
Simply add the following code to the Custom CSS field in the Divi Theme Options or add it to the stylesheet.css file of your child theme:
@media only screen and (min-width: 981px) {
.et_pb_posts .et_pb_post img,
.et_pb_posts .et_overlay {
width: 38%;
height: 180px !important;
margin-right: 4%;
float: left;
}
.et_pb_posts .entry-title,
.et_pb_posts .post-meta,
.et_pb_posts .post-content {
float: right;
width: 58%;
}
body.rtl .et_pb_posts .et_pb_post img,
body.rtl .et_pb_posts .et_overlay {
float: right;
margin-left: 4%;
margin-right: 0;
}
body.rtl .et_pb_posts .entry-title,
body.rtl .et_pb_posts .post-meta,
body.rtl .et_pb_posts .post-content {
float: left;
}
}Related Post: Adding CSS to the Divi Theme
Note: You can adjust the values 335px and 180px in the code to fit your needs. In this example the featured images are set to have 335 pixels in width and 180 pixels in height.
I hope this tutorial will help you to make your Divi blog look better, good luck!
THis is awesome THank you!
Hi, Thanks a lot for the code. I have used it for RTL site. Image showing right side. But overlay showing left site. Can you please help me? Thanks in advance. I have used below code. And the website is https://netindex.co.il/
@media only screen and (min-width: 981px) {
.et_pb_posts .et_pb_post img,
.et_pb_posts .et_overlay {
height: 180px !important;
width: 335px;
float: right;
left: 0;
margin-left: 25px;
}
}
Hi Jewelosman, the last thing you need to do in that code is change the "left: 0;" line to "right: 0;". I've updated the code in the post above to work with both LTR and RTL sites, but either using that or modifying your existing code should work. Let me know if you need any further help with it. Thanks!
Hi Dan, thanks for this. Perfect!
However, something happen after update divi and I don't know what to do.
As you can see the title now is below the image. That's very strange.
I forgot to say. On the visual builder the module display ok, but outside when i check see the site, it appears with the title below the image.
Hi Adri, did you manage to fix this? I checked on the site you've linked and I can see the titles (e.g. "Reciclagem na rua") showing up in the correct place, to the right of the image. If you're not seeing that, perhaps firs try clearing your browser cache first in case it's holding onto some old CSS from before the update. If you can still see the issue after that, let me know. Thanks!
Oh awesome! This is exactly what I've been looking for for ages. Thanks so much, Dan! :)
You're very welcome, Denise!
Perfect, thank you! Saved me a lot of time (:
You're very welcome, Ashleigh :)
Hi, I've asked for assistance re: this blog/code for months now. Can someone please contact me.
This code only works on pages 2 and older of my blog (not the blog landing page). Please help asap. This is the code I've used:
/* blog page text beside image */
@media only screen and (min-width: 981px) {
.et_pb_posts .et_pb_post img,
.et_pb_posts .et_overlay {
height: 200px !important;
width: 300px;
float: left;
left: 0;
margin-right: 25px;
}
}
You can view what I mean at: http://melissasteginus.com/blog
Hi Melissa, I'm really sorry I haven't been able to respond to you sooner. I've just sent you an email about it. It sounds to me like the first page of the blog is being cached somewhere (possibly the browser). From my browser I see the code being applied on the first page as well, and the post listing look the same on the first and subsequent pages. Anyway, I've included more detail in the email. Thanks!
Works like a charm, thank you very much !
Hi, I tried this and it hasnt worked – maybe Im doing something wrong with it
Hey Justin, any chance you are able to share a link to the page you're working on so that I can take a look at what is going on? Thanks!
Control image aspect ratios add this
object-fit: contain;
overflow: hidden;
https://divibooster.com/show-archive-page-featured-images-on-left-of-post-extract
Is there any way to get this to apply to a specific module vs. every blog module?
Hi Nik, go into your blog module's settings, and on the "Advanced" tab, enter a value for the "CSS Class", such as "my-blog-module". Then in the code above replace the two occurrences of ".et_pb_posts" with ".my-blog-module". The code should then apply only to that module (and any others you give the same CSS Class value). I hope that helps!
does not work for me? reason?
Hey Asif, are you able to share a link to the page you’re working on so that I can take a look? Thanks!
Thank you!!
Only one problem: Overlay feature no longer works.
Do you have a workaround?
Hey Brad, I've just updated the code to better handle overlays, and have simplified the code slightly. Let me know if you spot any other issues with it. Thanks!