Divi Theme for WordPress

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

Divi Theme for WordPress

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 Eileens 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.

21 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. @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.

  6. 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

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.