Moving the featured image in blog posts down

[123JH]

Hi there,

I was wondering if its possible to have the featured image on my blog posts full width? If thats not possible I would at least like to have some margin or padding above the featured image so its not inside the header, maybe there can be a container that has a gap or margin inside it?

[rad]

Hi Carolina,

Thanks for reaching out.

That’s doable, please add this CSS to Theme Options > CSS

    .single-post .entry-featured, .single-post .entry-featured img {
        width: 100vw;   
        position: relative;
    }
    
    @media (min-width: 1200px) {
     .single-post .entry-featured {
         left: calc( 0vw - ( 50vw - ( 1200px / 2 ) ));
     }
    }

    @media (max-width: 1199px) {
     .single-post .entry-featured {
         left: calc( 0vw - ( 50vw - ( 88% / 2 ) ));
     }
    }

Hope this helps.

[123JH]

This helped a lot and works very well, but optically it does not look good because of the images I have, which I won’t be able to change unfortunately. So I figured out what can be done and hopefully you can help me. I would like to have the feature4d images only shown on the post highlights/preview but if a user would click read more they are taken to the post that has a different image set.

but once the user clicks on any of the posts the post page has a different image.

[rad]

Hi Carolina,

That’s a separate issue I believe, what was asked is featured image of a single post giving it a full-width styling.

Now, your current issue was about image displaying differently from the listing and actual post. Please remove all images from your post, set it’s post format to standard, then set a featured image. If you have active Gutenberg editor, then deactivate it using a 3rd party plugin. That’s to make sure post format option are present.

Post Formats

Thanks!