Make Divi Featured Images Full-Width

Written by Dan Mossop

By default, the Divi Theme shows featured images at the top of posts, just after the post title. Here's how to have the featured images fill the full content width, above the post title (and sidebar).

First, we can put the image into position with the following CSS:

body.single article.has-post-thumbnail > img:nth-of-type(1),
body.single article.has-post-thumbnail .et_post_meta_wrapper > img:nth-of-type(1) { 
    position:absolute; left:0; top:0; 
}
The first row ensures the CSS applies only to the first image in a post with a thumbnail. The second moves the image to the top left corner of the container. As luck (or Elegant Themes) would have it, the top left of the container is in the perfect position for the image, and the image is even stretched full width by the current settings, so this is all we need to do to the image.

All that remains to be done is to move the post title and content, and the sidebar, below the image. We can do this by setting a top-margin on the content-area element, which is equal to the height of the featured image. Rather than try to do this in CSS, a far easier solution is to do it using jQuery, which lets us easily adjust the margin as the image height changes between posts and on browser resizes. Here's the jQuery code:

<script>
jQuery(function($){
    var featured = $('body.single article.has-post-thumbnail .et_post_meta_wrapper img:nth-of-type(1)');

    if (featured.length) {
        adjust_margin();
        $(window).resize(function(){ adjust_margin(); });
    }

    function adjust_margin() {
        $('#content-area').css('margin-top', featured.height());
    }
});
</script>
Note that this code is designed for featured images added on standard (non-Divi Builder) posts. It won't work with the post title module. However, you can simulate the effect in the Divi Builder as follows. First, add a post title module at the top of a single column layout. In this post title module settings disable everything (title, etc) except the featured image. Then add another post title module later in your page (at the appropriate place) to display the title. In this second post title disable the featured image.

Supercharge Your Divi Site with AI-Driven CTAs

Discover how WP Magic CTAs can enhance your Divi posts by creating customized, targeted call-to-actions that fit seamlessly with your full-width featured images. Perfect for promoting offers and driving conversions effortlessly.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

8 Comments

  1. Hey I have the booster, I clicked on the 'Make featured images as wide as the content area' but it makes the image worse, it was displaying the image as 1080px but the site is 1366px. It was cropping a section of the image on the left and right, but after clicking to make as wide as content it crops the image massively to a small box set to the absolute left with no margins like the rest of the site. Does this function needs an update? Im running everything on the latest versions, with php varibles all massive out on 7.3. :)

    Reply
    • Hi Brian,

      This feature was really designed for pages with sidebars. The idea is that the featured image is moved up and both the post content and sidebar are pushed down. This allows the featured image to be placed above both and to be enlarged to be as wide as the full-width of the content area. I've just checked and it still seems to be working correctly on pages with a sidebar.

      However, in your case you are using a full-width post layout. The featured images here are already full-width, so the feature above doesn't really apply. It looks like it is interfering with the full-width page – I'll try and get this sorted out (probably by disabling it on the full-width pages entirely, for the reason mentioned above). In the meantime, I'd suggest keeping it disabled on your site – I don't think it's actually what you need.

      Am I right in thinking the main problem you're trying to solve is the cropping of the images to 1080px, and hence the loss of some of the left and right of the image? I think this is caused by the issue I cover in this post:

      https://divibooster.com/stop-divi-from-cropping-feature-post-heights/

      There's a corresponding Divi Booster feature, at "Divi > Divi Booster > Posts > Prevent featured post height cropping", however, I'm not 100% whether it will work in your case. The feature was designed to stop cropping of the height, rather than the width. I think though, if you use the manual method described in the post and change the part of the code that reads "$sizes['1080×9998']" to something like "$sizes['2000×9998']" that should be sufficient to deal with the cropping in your case (basically replace the "1080" with something larger than your image widths).

      I hope that helps, but let me know if not, or if I've misunderstood what you're trying to do. Thanks!

      Reply
  2. Hello Dan,

    thanks a lot but as I'm reading this in 2017 I wonder if those codes still work with the new version of Divi 3.0?

    Reply
    • Hi Diana, it's still working with the latest version of Divi (currently v3.0.40) :) Let me know if you have any trouble with it, though.

      Reply
  3. I used the feature: Make featured images as wide as the content area – it blows up the page and now unchecking this option does not undo this feature. How can I reset?

    Reply
    • Hi Ina, I'm sorry to hear this. Once you've unchecked the option and saved, Divi Booster will have removed the offending code. However, if you have caching enabled, it may be that an old version of the Divi Booster style file is being shown. The solution in this case is to clear your site's caches. If you have a caching plugin installed, it should have an option to clear its cache. You may also need to clear your browser history. This post explains the process of clearing your caches in a bit more detail:

      https://divibooster.com/divi-booster-and-caching/

      Also, if possible, could you to send me a link to the page you're working on so that I can take a look at why the feature wasn't working (you can leave the feature disabled for this)?

      Reply
  4. Hi,

    just tried that but isn't working for me. Is it possible soemthign changed about how divi handles the featured image?

    The script for the footer works, but the image stay under the Post title.

    Thanks for all your awesome advice!

    Reply
    • Hey Chris, a while ago Divi did indeed make a change. I updated my plugin with a fix, but it looks like I forgot to update this post. I've just updated the CSS above to include the fix.

      If it's still not working for you after that, perhaps you can send me a link to your site so I can take a look and see if I can spot the problem?

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.