Archived topic
Full Width Pages using Kadence Blocks and bottom margin issues
9 replies · Started by Theresa on March 29, 2023
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?
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 :)
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.
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 :)
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.
No problem :)
I think it's too late for them to change the markup now.
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.
Hmm that's good to know.
I'll look into it some more.
Thanks!
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.
Glad to hear!
