Viewport widths/margins break columns

  • Resolved audunmb

    (@audunmb)


    4 years, 2 months ago

    If a place a block in a column and assign either Full width or Wide width to it, it overflows into the column next to it.

    The css is:

    .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0 15px;
}

    and 

    .alignwide {
    width: 70vw;
    max-width: 70vw;
    margin-left: calc(50% - 35vw);
}

    If I use Inspector to turn off the viewport-based widths and margins it shows properly.

    Will you fix this?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @audunmb,

    Could you please share the URL of your website where this issue is present so it’s easier to understand how it overflows the column next to it?

    Thank you!

    Thread Starter audunmb

    (@audunmb)

    Here’s an example on a live page. As far as I can tell this code is coming from the theme.

    Hi @audunmb,

    It’s a little counterintuitive to use this option like that. The wide-align option is not very suitable in a column within the page, it is generally used to cross the page container limit and have a full-width block, it wasn’t made to be used in columns.

    I hope that makes sense.

    Thread Starter audunmb

    (@audunmb)

    That makes sense. I was expecting full width to be 100% within a column.

    There’s also no visible “normal width”-function once you’ve chosen full width or wide width. Turns out that it is possible to click to turn it off, but since there was no visual hints on how to do it I thought that I had to choose either wide width or full width. Though that is an UI or UX issue with Gutenberg, not a fault of your theme. A “default” option once you’ve chosen width/alignment would’ve made sense.

    Thanks for the help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Viewport widths/margins break columns’ is closed to new replies.