Archived topic
How to have wide images in container?
4 replies · Started by Kev on August 6, 2021
Hey folks,
I have the GP container set to 1200px, which is fine for other elements like the header, footer etc. However, it's too wide for the long-form content in posts and pages, so I then have a layout element that makes the main content 620px.
Problem is, when I set images to wide in Gutenberg, they obviously don't escape the 620px limit. Is there a way for me to have the 620px width AND wider images?
Thanks,
Kev
URL is https://kevq.uk
Forgot to subscribe for notifications.
Hi there,
so the alignwide option will expand the width of the container padding, so in your case its only going to be 10px + 10px wider.
You can use some CSS to change that:
@media(min-width: 768px) {
.single .entry-content .alignwide {
margin-left: -80px;
width: calc(100% + 160px);
max-width: calc(100% + 160px);
}
}I went with 80px off set as that keeps the max image size to 760px. Which fits nicely in the @media breakpoint of 768px.
If you want to increase the offset then you need to consider changing or adding other media breakpoints.
Thanks worked perfectly. Thanks David.
Glad to hear that!
