Archived topic
Adding full-width or large images to blog post
1 reply · Started by Daniel on October 30, 2022
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
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,
