I am having an issue where an image block in Gutenberg editor is not the full with of the page even though I have selected "Full Width" in the back-end. Is there a way to fix this?
Image for reference:
1
-
1Setting an image as full width doesn't mean the CSS needed to implement that will be on the frontend, you'll need to add CSS to your theme to support full width images, otherwise you shouldn't add the theme support. Similar to how if you declare that your theme supports a header, WP will add the UI to select it, but you still have to implement support in your theme– Tom J Nowell ♦Oct 26, 2019 at 18:46
Add a comment
|
2 Answers
.wp-block {
max-width: unset;
}
If it is your custom block add to editor_style .
If not include css file with hook enqueue_block_editor_assets
You can use this CSS to allow an element to be full width even if it’s in a parent element with a max-width.
.is-fullwidth {
left: 50%;
position: relative;
transform: translateX(-50%);
width: 100vw;
}
Note: This only works if the element is centered. You would need to alter it if there’s a sidebar.
