Complete wordpress noob here. I’m currently building a website on block theme and my website is pretty much almost done. During preview of the website, I noticed there’s some white space between header and paragraph on all the pages. I played around a bit with inspect and found out the issue with padding.
Here’s the code that’s responsible for the white space:
<div class=”is-layout-constrained wp-block-group alignfull” style=”padding-top:var(–wp–present–spacing–x1);padding-bottom:var(–wp–present–spacing–xx1)”>…</div> == $0
When I change padding to zero (“padding-top:0” & “padding-bottom:0”), the white space disappears. So now, how do I add this is additional css?
The easiest way without breaking other areas of your site that use the same variable would be to redefine the variable for the specific element you want to change.
So you could do something like:
.is-layout-constrained {
–wp-present-spacing-x1: 0px;
–wp-present-spacing-xx1: 0px;
}
It would be better if you could add a custom class to the specific block you want to modify, that way you can target your selector to that exact block without the risk of breaking something elsewhere.
They you could just do:
.your-custom-class {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
To add this code as additional CSS, you can use the Custom CSS option in your WordPress theme settings or create a child theme and add the CSS there.
Go to Appearance > Customize in the WordPress admin menu
Select the Additional CSS option
Copy and paste the following code:
.is-layout-constrained.wp-block-group {
padding-top: 0 !important;
padding-bottom: 0 !important;
}