In block editor, full width blocks are wider than screen width

  • Resolved authentictech

    (@authentictech)


    3 years ago

    I am experiencing a problem on one inherited website where blocks that are full-width are displaying wider than the screen – 2458.75px pixels on my 1920 x 1080 monitor to be exact. This isn’t a problem on a monitor with a wider screen like 2560px but the people who need to edit the site content do not have monitors that wide and so can’t properly edit their content.

    The problem is occuring because div block containers with the attributes class="wp-block" data-align="full" has the following styles applied to them in the editor which always result in a width wider than the screen:

    .editor-styles-wrapper .wp-block[data-align="full"] {
  position: relative;
  left: calc( -12.5% - 14px);
  width: calc( 125% + 116px);
  max-width: calc( 125% + 115px);

    How can I fix this?

    The theme is a child theme of twentynineteen. It’s also using the Stackable plugin but I’m not sure if that’s relevant.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • whoudini

    (@whoudini)

    Hi there,

    Check out this article:

    https://www.hongkiat.com/blog/customize-wordpress-editor-styles/

    You can use the “add_editor_style” function as a means of editing the width for that specific class. As of right now it does appear that the “max-width” is spanning far beyond what it should be for most screens.

    Hope this helps!

    Thread Starter authentictech

    (@authentictech)

    @whoudini Thanks!

    This has enabled me to fix the problem. I found the errant code in TwentyNineteen’s style-editor.css which I could then override in my own stylesheet and load it using the add_editor_style function.

    Not only was the max-width rule too wide but the left rule was pushing the blocks off the left side of the screen by as much as -248.367px!

    I’d love to understand why the theme editors added those rules but I’m very happy I could fix it.

    Thanks again.

    whoudini

    (@whoudini)

    No problem, glad it worked out for you!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘In block editor, full width blocks are wider than screen width’ is closed to new replies.