If you’ve encountered the issue of an image block in the Gutenberg editor not stretching to the full width of the page, even after selecting “Full Width” in the backend, don’t worry! This common problem can be solved with a few simple steps. In this guide, we’ll walk you through the process of fixing this issue using CSS.

Identifying the Problem

The initial post in the discussion highlights the concern:

“I am having an issue where an image block in Gutenberg editor is not the full width of the page even though I have selected ‘Full Width’ in the back-end. Is there a way to fix this?”

Understanding the Solution

The first comment explains that merely selecting “Full Width” in the backend doesn’t automatically apply the necessary CSS for full-width display on the frontend. You need to manually add CSS to your theme to support full-width images. This is similar to how theme support for a header works – you declare it in the backend, and then you implement the support in your theme.

Applying the Fix

The second post provides a CSS snippet that you can use to address the issue. Here’s how you can do it:

1. Open Your Theme’s Stylesheet: If you are using a custom block, add the following CSS to your editor’s style. If not, include the CSS file with the enqueue_block_editor_assets hook.

   
   .wp-block {
   max-width: unset;
   }

2. This CSS rule ensures that the maximum width for the block is unset, allowing it to span the full width of the page.
3. Additional CSS for Custom Blocks: If you are dealing with a custom block, make sure to add the CSS within the editor style.
4. Handling Centered Elements: Another user in the discussion provides an alternative CSS snippet for elements that are centered:

   
   .is-fullwidth {
   left: 50%;
   position: relative;
   transform: translateX(-50%);
   width: 100vw;
   }
   

   This code is particularly useful if your element is centered. It positions the element in the center and sets its width to 100% of the viewport width (100vw).

   Note: If your layout includes a sidebar, you might need to adjust this CSS accordingly.