[Resolved] Column spacing in Columns Block is suddenly missing

Home Forums Support Column spacing in Columns Block is suddenly missing

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1402542
    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

    #1402796
    David
    Staff
    Customer Support

    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.

    #1402842
    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

    #1403026
    David
    Staff
    Customer 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.

    #1405741
    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

    #1405974
    David
    Staff
    Customer Support

    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 🙂

    #1406077
    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

    #1406186
    David
    Staff
    Customer 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 🙂

    #1406253
    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

    #1406257
    David
    Staff
    Customer Support

    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.

    #1406398
    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

    #1406408
    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

    #1406410
    David
    Staff
    Customer Support

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

    #1429757
    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

    #1429760
    Leo
    Staff
    Customer Support

    Can you open a new topic for the separate question?

    Thanks 🙂

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