Divi Digital Marketing Layout Pack

How to Make the Divi Theme Featured Images Smaller on Your Blog Page

Update 2021

Since writing this article, The Astra Pro theme for WordPress has been gaining popularity. The free version is being used on more than 1,000,000 websites and you can extend the functionality by upgrading to the pro version of the theme. Both versions fully supports the Astra Page Builder Plugin.

If you want to find out more and how it compares with Divi, take a look at the WPCITY article,  Divi Theme vs Astra Pro 2021: Which One Is Best for You?

Firstly I would like to thank Eileen Lonergan for pointing me in the right direction with her excellent post – How to Make the Divi Featured Images Smaller on Your Blog Page. Please take a look at the original to get more background information.

Unfortunately or not, the Divi Theme uses huge thumbnail images when displaying your blog posts or when you are using the blog module in the Divi Builder.

As in Eileen’s case, my client wanted to have blog post listing to have more of a traditional look with smaller images on the left and the text on the right.

In order to achieve this, you need to go to your Divi Theme Options panel, in the CSS area place this code:

.et_pb_post {
    margin-bottom: 100px;
}
.et_pb_post a img {
    height: auto;
    float: left;
    width: 200px;
    left: 0;
    margin-right: 14px;
    margin-bottom: 10px;
}
@media only screen and (max-width: 980px) {
    .et_pb_post a img {
        float:none;
        width:100%;
        height: 300px;
    }
}

The majority of the code above is the same as Eileen had developed with only a couple of modifications.

  • Most of the posts had very little text so they appeared staggered across the screen. Adding line 2 (margin-bottom: 100px;) in the code above resolved this issue.
  • I changed line 9 slightly, from padding-right: 14px; to margin-right: 14px;. Using padding worked well for the Divi blog module but left a gap between the image and the frame on the normal blog grid. Using margin resolved the problem.

All of the rest of the advice on Eileen’s post is exactly the same.

Thankfully, I now have a very happy client.

25 thoughts on “How to Make the Divi Theme Featured Images Smaller on Your Blog Page”

  1. Thank you very much for this post. I spent quite a while on this and even tried Eileen’s code and nothing worked. I put your code in and Voilà, it worked perfectly. Thanks again.

  2. better to change the height in mobile view to 100% otherwise it warps the thumbnail.

    height: 100%;

    One issue with this is the hover icon and effect is showing in the wrong place, so had to disable this function. If anyone has code fix for that too that would be great!

    1. Hi Dave
      Thanks for your input. I have to admit that I did not do much testing on mobile devices. I’ll take a look at the hover problem to see if I can add anything.
      Cheers Stuart

  3. Thank you! I have been spending so much time searching for a fix for this! This totally worked! Some codes I found were close but this one did what I had been trying to do. Thanks again!

  4. Hi Stuart,

    This code works fantastic, is there anyway you could provide some CSS to also sink the image in the actual post as well ??

    Regards,

    Pete

      1. Hi Stuart,

        Thank you for your reply, and thank you for the code to previously provided. What theme have you moved on to and any particular reason you have moved away from Divi?

        I like the versatility of divi however page load times are a little slow always like to hear what other professionals and moved too

        Cheers

        Pete

    1. Hi, sorry but I don’t use the Divi theme any longer. However, it should be quite easy either through settings for image sizes or some basic CSS.
      Stuart

    1. Hi, sorry but I don’t use the Divi theme any longer. However, it should be quite easy either through settings for image sizes or some basic CSS.
      Stuart

  5. Thank you so much. You have saved me a lot. I was looking for a way to reduce the image size, thank God I landed on your post. It has worked well for me and I am really appreciative.

  6. @media all and (min-width: 981px) {

    /*blog image size*/
    .et_pb_image_container img, .et_pb_post a img {
    max-width: 50%;
    vertical-align: bottom;
    }
    }

    This works great because it leave the phone at a large image and the computer at 50% reduced.
    Just Modify the max-width to the image size you like.

  7. Thank you very much for this post! The code worked perfectly and was just what I was looking for!

  8. Thanks, Stuart,
    Worked like a dream. The image became just as I wanted but there is no excerpt of the text on the home page

  9. So glad I found this article. I really love the Elegant theme but hated the large featured image. This fixed my problem with it. Code worked great.

  10. Thank you for this! The CSS selector also resizes a few images besides the thumbnails but those only show up when I’m logged in. Otherwise works like a charm!

    Thanks and be well!

  11. OMG! Thank you! The Divi theme is driving me mad. Absolutely nothing is an easy fix. Except this thanks to you. All love flowing your way. After a day of banging my head against the wall, FINALLY an easy fix xoxo

Comments are closed.