[Resolved] Full Width Pages using Kadence Blocks and bottom margin issues

[Theresa]

I am using the GeneratePress theme and have some pages set to a full width container, and the pages consists of several Kadence Blocks row layout containers. There have been no issues for a long time, and these pages haven’t changed. Just recently, I noticed these pages now have a bottom margin added to the end of some of the Kadence row container blocks which is causing the spacing between some of the full width blocks:

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

I removed this spacing using the developer tools and it fixes the extra spacing between the blocks. It appears to be code from GeneratePress.

In an older forum, I just read that full width content should be added inside a GeneratePress container block to keep content contained for full width backgrounds. So, I created a GeneratePress container block and moved the Kadence row layout blocks inside the container. This resolves the problem, but I’m wondering why this suddenly appeared. Is this possibly a bug that was introduced recently for full-width containers?

[Leo]

Hi there,

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

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Theresa]

The issue is on alot of pages, but here’s a few:
https://dcbloxstg.wpengine.com/ – there’s a white space before the divider right after the 3 boxes toward the top, and also right above the footer.
https://dcbloxstg.wpengine.com/data-centers/huntsville/ – right before Huntsville Alabama Construction site – spacing before divider.
https://dcbloxstg.wpengine.com/data-center-connectivity/ – right after header there’s a white space after the divider, and also before Let’s Talk block at the bottom.

[Leo]

Hmm I think the only solution right now is to use CSS to overwrite it:

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

Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

Our CSS above is supposed to only target the WP core blocks, hence [class*="wp-block-"].
I’m not sure why Kadence would add wp-block as a prefix to their blocks as it’s not a core block:
https://www.screencast.com/t/kp2noLqCUBv

And this is why GB blocks don’t have this issue as we don’t add that prefix which I believe is the right practice:
https://www.screencast.com/t/39LKhxpqWU

Let me know if this helps 🙂

[Theresa]

Yes, thank you. I added this code to the bottom of a page that has the issue and it works fine. I mentioned this to Kadence Blocks but no idea if anything will come of it.

[Leo]

No problem 🙂

I think it’s too late for them to change the markup now.

[Theresa]

I wanted to provide an update on this issue. I removed the temporary patch, turned off the old typography system and switched to dynamic typography. This fixed the issue with the bottom margin.

[Leo]

Hmm that’s good to know.

I’ll look into it some more.

Thanks!

[Guz]

Thanks for posting the problem and solution, I just ran into this on site I built a while back that used GP/GB and Kadence Blocks. I was seeing weird gaps under the rows. I think the client had updated GP and the plugins recently.

[Leo]

Glad to hear!

[Author]

Posts