- This topic has 14 replies, 4 voices, and was last updated 6 months ago by Leo.
August 14, 2020 at 6:34 am #1402542Thomas
I am using the Columns Block with 3 columns of equal size.
Each Column contains a cover block (image + text).
Until yesterday, the 3 columns were separated from each other, so that they looked like 3 separate panels.
Today, after updating WordPress to 5.5 and Generate Press incl. Premium plugin to the latest version, the appearance of the columns changed: the 3 columns now do overlap, without spacing between the columns content.
But: the editor shows the columns with spacing, whereas the site preview shows no spacing between the columns.
If needed, I can provide screenshots (the website I am working on is not reachable from outside).
I do not know, if the behavior of the columns was changed by updating WordPress, or by updating GP with Premium.
There is nor pagebuilder or caching module running, I tested the page with Chrom and Firefox.
I hope, somebody has a hint on what went wrong.
Thank you for your support, TCAugust 14, 2020 at 7:54 am #1402796DavidStaffCustomer SupportAugust 14, 2020 at 8:25 am #1402842Thomas
thank you for your support!
I added the CSS as written at “Adding CSS” (Customize > Additional CSS).
Unfortunately, it does not change anything.
What I don’t understand is
1) Why the columns are still OK in the Gutenberg editor, but not any more when previewed or published.
2) Why it worked until yesterday (before the updates) without adding any css.
A Link to the site will not help, because it is not available from outside our network. I can only send you Screenshots of the appearance in the Gutenberg editor and the appearance when published, if that helps you.
Best regards, ThomasAugust 14, 2020 at 10:21 am #1403026DavidStaffCustomer Support
I updated the code here – try that.
Why has it happened? – Looks like WP have changed their block CSS that sets the cover to 100% wide + padding but haven’t set border-box: box-sizing.
Let us know.August 17, 2020 at 1:04 am #1405741Thomas
thank you for the updated code, but that does not change anything, either.
I’ll check what happens if I change the theme to “Twenty Twenty”.
If it is indeed a WordPress 5.5-Problem and the columns also do not work with WP standard-themes, then I do not want to make it your support task, maybe I have to ask the WP-forum.
I’ll keep you updated!
Regards, Thomas CarlileAugust 17, 2020 at 4:44 am #1405974DavidStaffCustomer Support
A fix has already been pushed here:
Looks like their just waiting for the request to be approved.
You can use that CSS i provided in the meantime 🙂
Or you many want to try out GeneratBlocks:
You can add backgrounds to its Container and Grid block columns. And do lots more 🙂August 17, 2020 at 6:05 am #1406077Thomas
Here is the latest info regarding the columns problem:
I changed the theme to Twenty Twenty. The columns there look OK (old ones and new ones): there is space between them.
I changed back to GeneratePress and the columns do not have any spacing between them anymore, 3 columns look like one panel. So the problem seems to be that GP has issues with WP 5.5, I assume.
For now, I will continue writing the text of my pages.
As soon as that’s finished (may take a few weeks), I’ll check the columns again.
Maybe something has been updated in the meantime 😉
Best regards and thank you for your support, TCAugust 17, 2020 at 7:11 am #1406186DavidStaffCustomer Support
I just tested the Columns Block and the default column gap works fine.
Are these still the columns with the Cover Block inside them – if it is then apply that CSS i provided. TwentyTwenty applies box-sizing to everything which is why it works.
If not the case then let me see a link when you can ill take a nose 🙂August 17, 2020 at 7:45 am #1406253Thomas
you are right, columns consisting of paragraphs are OK, columns containing Cover blocks are not OK.
Do you just want to have a look at the site, or need a login to check the settings?
Bye, TCAugust 17, 2020 at 7:47 am #1406257DavidStaffCustomer Support
The CSS i provided here should fix that:
It’s something that WP needs to include in their block styles.
Which they have already committed to do:
So until that update happens the CSS above is the solution.August 17, 2020 at 7:57 am #1406398Thomas
I tried the CSS several times (I’ve put it to Design – Customizer – Additional CSS), but nothing changes.
Does the CSS have to be put somewhere else?
And furthermore: the columns containing Cover Blocks look OK in the editor, but not OK when the page is published.
Best regards, ThomasAugust 17, 2020 at 8:03 am #1406408Thomas
I just found out, why your CSS did not work.
After removing the “,” after cover the CSS works.
No more questions and thank you for your patience!
Greetings from Germany, TCAugust 17, 2020 at 8:04 am #1406410DavidStaffCustomer SupportSeptember 3, 2020 at 11:34 am #1429757Leslie
Hi David, I had the same problem after the WP update and I used the CSS you gave Thomas to fix it. Thank you. One follow-up question: The default vertical space between cover blocks is a little wide for my liking: http://lexata.kinsta.cloud/.
Can you suggest some CSS to narrow that vertial white space, e.g. so it matches the horizontal white space below the blocks? Thanks. LeslieSeptember 3, 2020 at 11:36 am #1429760
- You must be logged in to reply to this topic.