[Support request] Issues with new columns layouts

[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?

[Leo]

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 🙂

[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.

[David]

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.

[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.

[David]

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

[Author]

Posts