[Support request] Issues with new columns layouts

Home Forums Support Issues with new columns layouts

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1088142
    Ryan

    I was noticing there are some issues with the responsiveness of the new block editor column layouts. It seems like with some of the layouts the right column will drop under the left before it supposed too. With a 50% 50% split there isn’t a problem. Can you do some testing on the new layouts?

    #1088579
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1090370
    Ryan

    I went ahead and created a test page here https://www.ryansmithphotography.com/contact-form-test/. At around the tablet breakpoint the right image falls below the left, they should stay side by side until the mobile breakpoint.

    #1090576
    David
    Staff
    Customer Support

    Hi there,

    each of those columns is receiving a custom class e.g amp-wp-4d8e209 which has its own CSS that is overriding the core columns CSS. I assume this is the AMP plugin but i cannot tell as all of the CSS it is adding is inline.

    #1090602
    Ryan

    Yes my site is running on amp but the css is taken from your css and added inline. I went ahead and disabled amp on that page so you can see it does the same thing. It worries me though that you are not supporting amp.

    #1090626
    David
    Staff
    Customer Support

    OK – so i can see now the AMP plugin is disabled.
    The Column Width adjustment is adding Inline CSS – this is a function of the core columns block.
    The AMP plugin strips the inline and moves it to the head of the document ( so this is just an after effect ).

    Problem is Gutenberg developers didn’t consider how inline CSS would mess up any theme styles in regards to responsiveness. Just tested on 2019 and the same issue applies.

    You can use this CSS to force the themes styles to apply:

    @media (max-width: 769px) and (min-width: 600px) {
        .wp-block-column {
            flex-basis: calc(50% - 16px) !important;
            flex-grow: 0;
            flex-shrink: 1;
        }
    }

    Problem it forces columns to 50%.

    Personally i would not use the Column Width adjuster as they have royally made a mess of it and use CSS Classes on each column.

    UPDATE: GitHub issue here:

    https://github.com/WordPress/gutenberg/issues/18416

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.