[Resolved] Random margin-bottom being added to entry-content

Home Forums Support [Resolved] Random margin-bottom being added to entry-content

Home Forums Support Random margin-bottom being added to entry-content

  • This topic has 7 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1485086
    DAVID

    hi –

    I have a white space being added to the end of blocks and it seems to be added by the customiser.

    Screenshot of white space

    The bit of css that creates the white space is I think margin-bottom on this:

    .entry-content > [class*=”wp-block-“]:not(:last-child) {
    * 
 margin-bottom: 1.5em;
    }

    But I can’t find out where that is being added. I am trying to butt the blocks up against each other with no added space. I thought it might be the option for separating space or content separator but neither is set to 1.5em and adjusting them doesn’t seem to make any difference.

    Here’s the HTML that is being produced. This is built in Gutenberg.

    <div class="wp-block-group alignfull has-background" style="background-color:#f8f2e5"><div class="wp-block-group__inner-container">
    <div class="wp-block-columns are-vertically-aligned-center has-background" style="background-color:#f8f2e5">
    <div class="wp-block-column is-vertically-aligned-center">
    <h2>Launching this Autumn with a whizz and a bang</h2>
    <p>Delivering the finest drinks from regional producers</p>
    <div class="wp-block-buttons">
    <div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" href="https://xxxx" style="border-radius:2px;background-color:#906d51">Sign up for our newsletter now</a></div>
    </div>
    </div>
    <div class="wp-block-column is-vertically-aligned-center">
    <figure class="wp-block-image size-large"><img loading="lazy" width="967" height="450" src="xxxx.png" alt="Autumn illustration" class="wp-image-330" srcset="xxx.png 300w, xxxx.png 768w, xxx.png 150w, xxxx.png 600w, xxxx.png 64w" sizes="(max-width: 967px) 100vw, 967px"></figure>
    </div>
    </div>
    </div>
    </div>

    Hoping you can help. Thanks!

    #1485262
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1485446
    DAVID

    replied privately

    #1485832
    Leo
    Staff
    Customer Support

    Try this CSS:

    .entry-content > [class*="wp-block-"]:not(:last-child) {
        margin-bottom: 0;
    }
    #1486113
    DAVID

    Thanks. That fixed it. Is that a bug or a feature?

    #1486978
    Leo
    Staff
    Customer Support

    That’s just a CSS we added to make sure that there is separating space between each WP block.

    #1486994
    DAVID

    Probably cool to make that an option in the customiser then? Anyway, thanks for your help.

    #1487040
    Leo
    Staff
    Customer Support

    I would recommend using GenerateBlocks to create the layout you are after:
    https://generateblocks.com/

    It would give you full control of the margins/paddings between each block 🙂

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