0

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: enter image description here

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
    Oct 26, 2019 at 18:46

2 Answers 2

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.