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

Home Forums Support Make an Image in a Blog Post Full-Width

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1131295
    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!

    #1131414
    David
    Staff
    Customer Support

    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;
        }
    }
    #1131444
    Nikita

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

    #1131493
    David
    Staff
    Customer Support

    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.

    #1131558
    Nikita

    Thanks a lot! It was more than helpful!

    #1131833
    David
    Staff
    Customer Support
    #1318687
    Nikita

    Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.