Featured image larger than mobile screen

Hi there,

you have this CSS on your site:

@media (max-width: 768px) {
    .featured-image.page-header-image-single img {
        max-width: unset;
        width: 120vw;
        margin-left: -15vw;
        margin-right: -15vw;
    }
}

I can't see where it is coming from due to the cache/optimizations on the site.
Do you know where that is from ?

I added it myself on the theme's child CSS so the image borders are cropped on mobile, but it doesn't seem to be the cause as if I remove it the problem persists.

I've removed it now to help checking it.

Ok:

In Customizer > Layout > Blog --> Featured Images you have unchecked: Display padding around images
This gets the padding value from the Customizer > Layout > Container which is set to 30px.
And uses negative margins to remove that padding.
But in your child theme styles you have this CSS:

@media (max-width: 768px) {
    .one-container .site-content, .separate-containers .inside-article {
        padding: 10px;
    }
}

Which reduces the padding to only 10px. So you get overflow.

Check this option Display padding around images to stop that.
And remove the CSS you have for resizing the image.

Then add this CSS:

.featured-image.page-header-image-single {
    margin-top: -20px !important;
    margin-left: -30px;
    margin-right: -30px;
}
@media(max-width: 768px){
    .featured-image.page-header-image-single {
        margin-top: -30px !important
        margin-left: -10px;
        margin-right: -10px;
    }
}

Thank you! That solved the problem.

I've kept the CSS for resizing as I have not found a better way to make the image not so horizontal on mobile. But it looks fine with the steps you provided.

Awesome support as always. :)

Glad to be of help :)