Archived topic
Extra Spacing Showing Up Between Hero Element and #content.site-content
7 replies · Started by Brent Wilson on March 28, 2022
I have some pages where I have added hero elements (for example, https://ericollila.com/coaching/). But there seems to be extra vertical space showing up between the bottom of the hero and the top of the #content.site-content div. An example of a page with no hero element that does not seem to have this extra space issue is https://ericollila.com/events/. Any ideas what is going on here?
Hi Brent,
Do you mean this?
https://www.screencast.com/t/LkDBybWo
If so, that's the bottom margin comes with the image block, the style is added by WordPress.
Do you want to remove it?
Yes, that.
You can give the GB container a CSS class, eg. hero, then add this CSS:
.gb-container.hero figure.wp-block-image {
margin-bottom: 0;
}So I apply the class to the container, not the image block?
While I like that GB is simple with very few blocks, I do kind of wish that there was an image block included that would allow me to set spacing and such with more control than the default WP image block has.
So I apply the class to the container, not the image block?
To the image block will also work, eg. hero-image, then the CSS would be:
figure.wp-block-image.hero-image {
margin-bottom: 0;
}Thanks for the help!
No problem :)
