How to take large gap out between blocks

Support
#1

Hello
Can you please provide me with some code to take out some of the rooms between blocks. There just seems to be a bit too much space between the blocks for me.

Thank you.

#2

Hi Bryan,

Thank you for writing in, but I am not sure what you’re referring as Blocks (please clarify). If it is the Section, because section has a default 45px top and bottom, you can adjust that by inspecting the Section



And adjusting the top and bottom padding



Hope it helps,
Cheers!

#3

Hi
Thanks for coming back to me. I can’t access section by inspecting it. I am guessing this is because I haven’t been using cornerstone? Is that correct?

I have been using whatever comes with Wordpress.
If you look at this page, https://northamericanmammals.com/what-mammals-live-in-connecticut/ there is a big gap between the end of the allegheny woodcut secition and the heading of American black bear. The same happens between the end of a photo and the next heading.

Any ideas?

#4

Hi Bryan,

Yes, right my screenshot above is from Cornerstone, my bad.

The cause of your issue is the default top margin of the headline (h2) and the default bottom margin of the paragraphs §. To resolve this issue, please add this to Theme Options > CSS

.single-post p {
	margin-bottom: 0.5em;
}
.single-post h2 {
	margin-top: 0.5em; 
}

Feel free to adjust the 0.5em value, and clear your caching plugins to see the changes immediately.

Block Editor Handbook

Cheers!

#5

Thank you, that looks much better. Is there a similar code to reduce the space at the bottom of an image.

Would it be

.image-post p {
margin-bottom: 0.5em;
}
.image-post h2 {
margin-top: 0.5em;
}

If it is, I would be amazed lol.

#6

Hi Bryan,

For images, please try this:

.single-post .wp-block-image {
    margin-bottom: 10px;
}

Hope this helps.

#7

Awesome. Thank you for the tutorials as well. They will definitely come in handy.

#8

So I have tried your suggestion. It doesn’t make a difference to the gap. If I change it to 1 px it doesn’t change the gap and make it narrower but if I change it to 100px then it does increase. Does this just mean that the image block (Gutenberg) itself has a blank space underneath it. Is there a way of changing this?

#9

Hello Bryan,

It seems that the spaces are still there for images that are aligned center so kindly update the code to:

.single-post .wp-block-image,
.single-post .wp-block-image .aligncenter {
    margin-bottom: 10px;
}

Let us know how it goes.

#10

That is fantastic. I even wrote my first bit of code (sort of copied yours really) to make the top gap bigger. Thank you very much for all your help.

.single-post .wp-block-image,
.single-post .wp-block-image .aligncenter {
margin-top: 60px;
}

#11

You’re most welcome, Bryan. :slight_smile:

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.