With WP 5.0 you can now enable full width blocks in the editor by adding this to your theme: add_theme_support( 'align-wide' );

However, if you are using a custom theme you have to add your own CSS to make that work, as discussed in this Gutenberg issue. There are lots of examples out there that do work, but there are scrollbar issues with all of them for anyone not on a Mac.

The problem is if you use width: 100vw, which is the best way I've found to do this, on Windows devices you get a horizontal scroll bar as soon as you have a vertical scroll bar on the page. I understand this is actually per the viewport width spec, so I'm really hoping to find another way to actually make this work on all devices.

What I have right now to enable full width is this CSS:

.entry-content .alignfull {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
body .entry-content .alignfull > * {
    width: 100vw;
    max-width: none;

I then add an overflow: hidden; on my outside container <div> of whatever wraps the_content() so as to hide the scrollbar. But what I'm looking for is a solution that doesn't rely on overflow hidden which can cause all kinds of unintended consequences. Any ideas out there?


2 Answers 2


After banging my head over that horizontal scroll bar issue, I think going the other way and adding a max width to blocks without the alignfull classes. If you just remove your page templates wrapper and assume it as 100%. Here is a pen with the WP markup as closely emulated as I could https://codepen.io/nickfmc/pen/vvbWQa

.editor-content > *:not(.alignfull) {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

.editor-content > *:not(.alignfull).alignwide {
  max-width: 1400px;
  • Hmm. This looks like a really interesting idea. Only problem is I think you have to have a wildcard (*) selector instead of the wp-block. The issue if you don't, what if you just have paragraph text block or a heading block? They aren't wrapped by wp-block-XXX class so they run full width when they shouldn't.
    – Trevor
    Feb 11, 2019 at 1:10
  • updated as per your suggestion, I think you are right this is a better way to go. Seems to be working well for me using this solution
    – NickFMC
    Feb 22, 2019 at 21:40

Actually this can be solved with just a few simple lines, and it has far fewer unintended consequences than anything else I've seen or tried. This is basically what the TwentyTwenty theme is doing, though they do include an overflow: hidden -- but that's not necessary to prevent the horizontal scrollbar.

.entry-content .fullwidth {
  max-width: 100vw;
  position: relative;
  width: 100%; 

Problem solved with no horizontal scrollbar in Windows.

  • 2
    This doesn't work in the normal situation where content is wrapped by a container with a specific width, hence why the negative margins are used above, and hence this post and the whole problem with the scrollbar.
    – Ned Martin
    Jul 14, 2020 at 6:43

Your Answer

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

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