- This topic has 5 replies, 3 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
December 1, 2019 at 9:39 am #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?
December 1, 2019 at 4:05 pm #1088579Leo
StaffCustomer SupportHi 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 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 2, 2019 at 12:20 pm #1090370Ryan
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.
December 2, 2019 at 2:41 pm #1090576David
StaffCustomer SupportHi 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/December 2, 2019 at 2:52 pm #1090602Ryan
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.
December 2, 2019 at 3:13 pm #1090626David
StaffCustomer SupportOK – 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.