[Resolved] Column spacing in Columns Block is suddenly missing

[Thomas]

Hello,

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, TC

[David]

Hi there,

Try adding this CSS:

.wp-block-cover {
    box-sizing: border-box;
}

If that doesn’t work then link me to the site so i can see the issue.

[Thomas]

Hello David,

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, Thomas

[David]

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.

[Thomas]

Hello David,

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 Carlile

[David]

A fix has already been pushed here:

https://github.com/WordPress/gutenberg/pull/24311

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:

https://generateblocks.com

You can add backgrounds to its Container and Grid block columns. And do lots more 🙂

[Thomas]

Hello David,

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, TC

[David]

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 🙂

[Thomas]

Hi David,

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, TC

[David]

The CSS i provided here should fix that:

https://generatepress.com/forums/topic/column-spacing-in-columns-block-is-suddenly-missing/#post-1402796

It’s something that WP needs to include in their block styles.
Which they have already committed to do:

https://github.com/WordPress/gutenberg/pull/24311/commits/901e3d78c3f66c107ac7b1b5260c606fdc64ff2a

So until that update happens the CSS above is the solution.

[Thomas]

Hello David,

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, Thomas

[Thomas]

Hello David,

I just found out, why your CSS did not work.
You wrote:

.wp-block-cover,{
box-sizing: border-box;
}

After removing the “,” after cover the CSS works.
No more questions and thank you for your patience!

Greetings from Germany, TC

[David]

Ooops – sorry about that – i corrected my original code – thanks for spotting it 🙂

[Leslie]

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

[Leo]

Can you open a new topic for the separate question?

Thanks 🙂

[Author]

Posts