Gutenberg blocks not full width

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:

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:

• block-editor
• content-width

Share Improve this question asked Oct 26, 2019 at 18:30 d.girdyd.girdy 144 bronze badges 1

• 1 Setting 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 ♦ Commented Oct 26, 2019 at 18:46

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

.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.