Here’s a simple way to change the size of the thumbnail that appears on single blog posts when using the Divi Theme by Elegant Themes

No php or HTML coding involved and we won’t be making a child theme.

This method is a much safer alternative to messing about with your core WordPress files and will not interfere with your theme’s code at all.

Elegant Themes do a great job of producing fantastic themes at reasonable prices. The lifetime licence package is superb value in the long run and the Divi theme, Elegant Theme’s flagship theme, continues to evolve and become more powerful and easier to use – which is a great trick if you can do it. But while I like the way that the masonry blog module displays a page of posts and shows a nicely sized thumbnail of the featured image, that all changes when I click through to view a single post.

Suddenly, the thumbnail is enormous. Its width spans across the top of the post and it then takes up far too much vertical space. Yes, I know I can choose to turn that single post thumbnail off in the theme options panel, but then I’d have to add each thumbnail to the post as well as to the featured image widget on each post. There may be another way around this, but I haven’t got all day to sit around resizing images and placing them twice. It’s quickest for me to add a simple CSS rule that will tame the images.

Below, I’ll tell you what I did, but first, a couple of disclaimers:

This worked for me, today with my plugins, theme and setup – you may be using a different combination of things and it may not work for you (but it probably will).

Always, always take regular backups of your database and files.  If you don’t know how, then please google it today. There are many methods so just choose one that works for you.

Let Us Begin

Login to your WordPress dashboard and use the sidebar to navigate to: Divi >> Theme Options

On the General Settings Tab scroll right down to the Custom CSS box.

Type in the following CSS (it must be exact):

.et_post_meta_wrapper > img {height: 250px; width: auto;}

Click on Save

Of course you can change the height of the image to whatever value you wish but somewhere between 150px to 250px is probably about right.

Visit your site and reload the page.  You may need to refresh your browser’s cache by hitting Ctrl and F5. If you’re using a caching plugin, you may need to purge your cache.

Slap Me On My Back and Call Me Shorty – You’ve Done It!

This code is a piece of style information that doesn’t affect how your site works, it only affects how it appears in a browser.  Because I used the custom CSS box built into Divi, it shouldn’t be affected by a theme update unless ET go and change their CSS, in which case I’ll try and post an update here.

I hope it works for you.  If you appreciated this, please share the good news with a tweet:

I just found this great Divi tip from @mikeycampling - you might find it useful too: Click To Tweet


Have a read on me -

Claim Your Free Starter Library

You'll receive a collection of ebooks via email, all free and yours to enjoy at your leisure. I hope you enjoy them.
free scifi books

Get a Free Starter Library

free scifi books
Claim Your Free Books
You can unsubscribe anytime.
Click Me
%d bloggers like this: