Margins on neighbouring blocks

  • Resolved Mark Howells-Mead

    (@markhowellsmead)


    1 year, 9 months ago

    When adding breakpoint-based blocks, e.g. hiding a block on mobile, then the margins on sibling blocks are retained. E.g. in the following example, the top margin on the second paragraph is still in place.

    <div class="wp-block-group is-layout-flow">
    <p class="block-visibility-hide-small-screen"><strong>Title</strong></p>
    <p>Text</p>
</div>

    Is this something you’ve also come up against? I realise that this isn’t something which the plugin can address directly, but have you thought of a workaround?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hey Mark,

    Yeah, this is a tough one, and there is no reliable way to handle this in the plugin. That said, you can solve this with some tricky CSS.

    *[class="block-visibility-hide-small-screen"] + * {
    margin-top: 0;
}

    You will probably want to wrap this in a media query so it only applies when the block is hidden, but it should work well.

    Let me know if I can help further.

    Best,
    Nick

    Thread Starter Mark Howells-Mead

    (@markhowellsmead)

    That’s a good solution, thanks Nick.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Margins on neighbouring blocks’ is closed to new replies.

Tags