Full and wide alignment in Gutenberg

The new WordPress block editor includes two new alignment options.

To take advantage of the new alignment options, your theme must first support them. Include add_theme_support( 'align-wide' ) in your functions.php file.

Full Alignment

The .alignfull option should span the full width of the screen. I typically do this using the following CSS:

.alignfull { margin: 32px calc(50% - 50vw); max-width: 100vw; width: 100vw; }

The margin property can accept up to 4 values. In this case I provided 2 properties so the first ( 32px) is applied to the top and bottom, and the second (calc( 50% - 50vw)) is applied to the left and right.

This tells the browser to calculate 50% of the its container’s width (ex: 900px) and subtract from it 50% of the viewport width (ex: 1600px). This results in a negative margin that pulls the element to the edges of the screen.

Make sure you have width: 100%; overflow: hidden; on your site container. In some browsers, the 100vw doesn’t consider the vertical scrollbar so it will make your page a bit too wide, adding a horizontal scrollbar.

Wide Alignment

You have more flexibility with the .alignwide option. It should be wider than the main content area, but not as wide as the full alignment. There are two approaches I usually take:

Percentage Width

This is my default styling option built into my base themes. It copies the full alignment in approach, but instead of stretching the full gap between the browser edge and the content, it only does half.

.alignwide { margin: 32px calc(25% - 25vw); max-width: 100vw; width: 100vw; }

Max width

I set a maximum width if there are certain design constraints (like the Recommended Reading floating to the right) or you only want the image to reach a certain size.

I’ll make .alignwide and .alignfull use the same CSS at first, but at a certain break point I’ll change .alignwide to a fixed max width and margins.

For the negative left/right margin, I subtract the full page width from the content width and divide by two. Ex: ( 768px – 920px ) / 2

.alignwide, .alignfull { margin: 32px calc(50% - 50vw); max-width: 100vw; width: 100vw; } @media (max-width: 920px) { .alignwide { margin: 32px -76px; max-width: 920px; width: 920px; } }

You can also put the math directly in the CSS using calc()

.alignwide, .alignfull { margin: 32px calc(50% - 50vw); max-width: 100vw; width: 100vw; } @media (max-width: 920px) { .alignwide { margin: 32px calc( ( 767px - 920px ) / 2 ); max-width: 920px; width: 920px; } }


I use SASS variables to store common units like the margins, content width, and breakpoints (see here). To implement the above using my SASS variables:

&.alignwide, &.alignfull { margin: calc( 2 * #{$block-margin} ) calc(50% - 50vw); max-width: 100vw; width: 100vw; } @include media(">=medium") { &.alignwide { margin: calc( 2 * #{$block-margin} ) calc( ( #{$content-width} - #{map-get( $breakpoints, 'medium' ) } ) / 2 ); max-width: map-get( $breakpoints, 'medium' ); width: map-get( $breakpoints, 'medium' ); } }

If we decide we want the wide images a bit wider, we simply edit the medium breakpoint and all the math automatically updates. Likewise, if we change the block margin, the top/bottom margin also updates.

Consider Sidebars

If your site uses sidebars, make sure you test your styles on a page with a sidebar.

You can either limit the full/wide alignment styles to pages with .full-width-content body class, or use the max-width approach shown above, ensuring the max-width stops before overlapping the sidebar.

I prefer disabling the full/wide alignment styles on pages with sidebars. The CSS is cleaner, and you don’t end up with two different versions of “wide” and “full” alignments.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions


  1. Jennifer Davis says

    I like your idea of disabling the full/wide alignment styles on pages with a sidebar. I have set the styles for alignwide and alignfull as following in my custom theme stylesheet:

    body.home .alignwide, body.page-template-fullwidthpage .alignwide

    But what I would really prefer is to prevent a client from having these options in the editor itself. Since the alignwide and alignfull styles are added from the “add_theme_support(‘align-wide’);” in the functions.php file, is there a way to set this so the alignwide and alignfull icons only appear as options on full-width pages?

  2. Robert Went says

    I found that the full-width css created a horizontal scrollbar.

    This seems to be because the vw unit also includes the width of the vertical scrollbar.

    Chrome and firefox both seem to have a scrollbar of width 9px but edge is a little wider.
    So this kind of works:

    .alignfull {
    margin-left: calc(50% – 50vw);
    max-width: calc(100vw – 9px);
    width: calc(100vw – 9px);

    @supports (-ms-ime-align:auto) {
    .alignfull {
    max-width: calc(100vw – 8px);
    width: calc(100vw – 8px);

    but then the image isn’t wide enough if there is no vertical scrollbar.

    Luckily, my botched code for a sticky footer means there is always a vertical scrollbar on the site I’m working on 🙂

    I also changed the margin to just work on the left so that the top and bottom values are inherited and stay the same as when the image uses the standard alignment classes.

      • Bill Erickson says

        One thing that has worked for me is adding overflow: hidden; width: 100%; to some full-width div that wrap the entire site. In my themes, that is .site-container.

        • Rob says

          Yeah, I think it wasn’t possible to do that on the site I was working on as it breaks position: sticky that I was using on other elements.

  3. Tim Priebe says

    This was super helpful. I’m using Beaver Builder themer but still doing blog posts with Gutenberg, and this worked perfectly!

  4. Josh says

    Hmm, so from my testing, the align wide
    .alignwide {
    margin: 32px calc(25% – 25vw);
    max-width: 100vw;
    width: 100vw;
    Just sort of shoves the element off to the right? Maybe I’m missing something.

    However, the align full solution you gave blew my mind! Thanks for the help!

    • Bill Erickson says

      While the alignfull CSS stretches the element fully to the left/right of the screen (50% - 50vw), the alignwide CSS stretches it half the distance (25% - 25vw).

      You can of course change the CSS to work however you’d like. On most of our sites we’ll use an 1168px wide grid for the header and footer, and set the content width to 768px. I set the alignwide class to have max-width of 1168px so it is inline with the header/footer content.

      The CSS above is just a starting place for you. It makes the wide alignment option halfway between “none” and “full”. You should update the CSS to whatever makes sense for your theme.

  5. HH says

    Hey Bill,

    I’m trying out your EA Genesis Child theme since what you talked about above is already included in the theme. I see the .alignwide and .alignfull works as described for the default Gutenberg blocks and also Atomic Blocks. I was also trying the new GenerateBlocks (by the GeneratePress guys), but the .alignwide and .alignfull does nothing. Also, the Block Areas post type won’t save when I use GenerateBlocks. Works fine on Pages and Post post types. Not sure if these issues are related to the theme or plugin.

    • Bill Erickson says

      I’ve never used GenerateBlocks so I can’t comment on how they would work with my starter theme. My guess is either (a) their blocks don’t actually support the alignment classes, so when you select “Align Wide” it is not adding the .alignwide class to the block, OR (b) their blocks include more specific CSS that is overriding our alignment styling.

  6. Iker says

    Hi, I need to know, how could I remove the spaces between blocks that are formed when editing with gutenberg

    • Bill Erickson says

      You could write some CSS to remove it, but I really recommend keeping it. The space between blocks ensures the “Insert block” button that appears between blocks is accessible.

      When you’re in the block editor, right click on a block and inspect element. You’ll see the CSS that’s adding the margin between blocks.

Leave A Reply