[Resolved] Make an Image in a Blog Post Full-Width

[Nikita]

Hello! I would like to know if it is possible to make an image within the blog post full-width (on mobile devices). The featured image shows exactly like this so maybe it is possible to make the images within the articles full-width too. Thank you!

[David]

Hi there,

its a little bit hackish but try this CSS – it will (should) apply to all images within the content of a single post:

@media (max-width: 768px) {
    .single-post .entry-content img {
        margin-left: -30px;
        width: 100vw;
        max-width: unset;
    }
}

[Nikita]

So am I right to assume that it will be even more troublesome to make NOT all but CERTAIN images full-width?

[David]

Yeah you would need to target a specific CSS class(es) or HTML Element for example i notice some images are wrapped in H3 elements and this CSS would apply only to them:

@media (max-width: 768px) {
    .single-post .entry-content h3 > img {
        margin-left: -30px;
        width: 100vw;
        max-width: unset;
    }
}

This part of the CSS: h3 > img tells it to style only Images that are within the H3 element.

Let us know if theres any specifics i can look at.

[Nikita]

Thanks a lot! It was more than helpful!

[David]

You’re welcome

[Nikita]

Thank you!

[Author]

Posts