Fullwidth blog post image, NO container?

[askemerci]

Hi there,
I would like to have my blog post image(the featured image) to be full width, but it seems nearly impossible without i have to deal with code.
I have though tried this one: https://theme.co/apex/forum/t/fullwidth-blog-image/50630/2

But it didn’t work. I’m using child theme.

I just wants to remove the container on the blog post’s.

How can i do that?

I’m using latest X and Conorstone.

Kind regards

[rad]

Hi @askemerci,

Thanks for reaching out.

Instead of implementing the code from that thread, 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 ) ));
     }
    }

Then make sure to change the 1200px and 88% with the value you have set in Theme Options > Layout and Design

Example, if it’s changed to 1024px and 90%.

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

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

Thanks!