[Support request] Adding full-width or large images to blog post

[Daniel]

Hi there!

My posts have a contained width of 800 pixels.

I would like to have a few images throughout the post that are 1200w. Here’s an example of a post:

https://drawpaintacademy.com/staining-the-canvas/

Is there an easy way to do this without changing the settings of previous posts?

Cheers!

Dan

[David]

Hi there,

it is possible to force an element to be wider then the parent container.
Thats how the full-width and wide-width options in WordPress block editor work… but they are prone to causing overflow on some browsers.

For your need you could do the following:

1 Add this CSS to your site:

.wide-1200 {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.wide-1200 figure {
    width: 100%;
    max-width: 1200px;
}

.wide-1200 figure img {
    width: 100%;
}

2. Select the Image Block and give it an Advanced > Additional CSS Class of: wide-1200

If that works, but you have horizontal scroll then let us know and we can look at stopping that,

[Author]

Posts