[Resolved] How do I reduce white space between the WP blocks?

[Trish]

Hi,

WordPress has complicated their software so much that if it weren’t for the amazing support at GeneratePress, I’d seek out a new CMS. WordPress frustrates me THAT much.

I need to be able to reduce white space between 2 blocks of text and cannot figure out how to do that. See screen print here: https://www.awesomescreenshot.com/image/26570178?key=9f1262e52621944f058a74a85fd40194

Please help?

Thank you in advance,
Trish

[Leo]

Hi there,

Is there a reason why you are using the columns block there?

It doesn’t look like it’s needed.

[Trish]

Well, I could use one giant block of HTML to get the style I’m after, but I am trying very hard to work with WordPress’s more complicated Block Editor.

So yes, for me, the white space really does need to be reduced by at least half of what it is.

Do you see the page-ID as being 40?

[Leo]

Have you considered using GenerateBlocks? It will make things super easy to create what you are trying to do here without any CSS at all.

And yes the ID of that page is 40.

[Trish]

No thanks Leo. Tried that plugin once and that frustrated me more. I do NOT like page builders.

Why software developers insist on reinventing the wheel is beyond me!

I’ve spent HOURS today TRYING to discover HOW to remove the white spaces and NOTHING is working.

Am VERY tempted to just add a BIG block of HTML custom and paste my entire page in HTML. Grrrrrr, I do NOT like WordPress anymore!!!!! Ranting now done.

[Ying]

The space if from 2 elements:

1. H2’s bottom margin: https://www.screencast.com/t/D5n6FCFL
2. WP columns bottom margin: https://www.screencast.com/t/EyvwDLbb

This CSS will remove the bottom margin of the H2:

.page-id-40 .wp-block-column h2 {
    margin-bottom: 0;
}

[Trish]

Tired changing under Additional CSS : https://www.awesomescreenshot.com/image/26574710?key=8015a2ce1e0551070f08b711299fd5ff after trying the code you gave me to use didn’t work (as I found that idea among the MANY things I did try earlier today… with no luck).

Tried you code again… and still doesn’t work. 🙁

[Fernando]

From my end, the CSS provided, which you’ve added seems to be working as expected.

See this as proof: https://share.getcloudapp.com/5zuLlzWR

Can you try clearing your browser’s cache and test again?

If you would like to further remove the remaining spacing, which is coming from the WordPress Columns Block’s bottom margin, you may add this CSS as well in Appearance > Customize > Additional CSS:

.page-id-40 .wp-block-columns {
    margin-bottom: 0;
}

Or if you would like to remove all default bottom margins for WordPress Columns Blocks, use this code instead:

.wp-block-columns {
    margin-bottom: 0;
}

Hope this clarifies. 🙂

[Trish]

Thank YOU Fernando… the second CSS script worked, but not the first one. Why?

And you’re right… I do want all of the white spaced between the blocks reduced: https://www.awesomescreenshot.com/image/26580395?key=5b3217080b6257792e26d75932f25172

Plus… the original page… ID 40… turned out something on the page was corrupted and that’s why the trouble with the CSS NOT being seen.

So created a brand new page (same address) which now has a different ID… and now the page can see the CSS added to the Simple CSS textbox below the Edit textbox or window.

I do not understand why Ying’s script and your first one did NOT work, please?

[Fernando]

The original page has an ID of 40 and the new one seems to have an id of 93 which is why the code didn’t work.

A more appropriate code would be:

.page-id-93 .wp-block-columns {
    margin-bottom: 0;
}

Hope this clarifies. 🙂

[Trish]

OOOOh my gosh… it must be ’cause it’s after midnight here and I’ve been struggling with this issue for far too long today. I feel like an idiot.

You’ve got it so my spacing is perfect… except I would like the HR tag closer to the bottom of the “Watch at Anytime…” line. I’ve tried adding it as HTML code so that the HR is away from the bottom line of text, like it is. Tried adding a vertical alignment, but that’s not working for me.

Any suggestion would be greatly appreciated.

[Fernando]

You may add a class my-hr to the Separator Block as such: https://share.getcloudapp.com/kpuJG0Ky

Then, add this CSS in Appearance > Customize > Additional CSS:

hr.my-hr {
    margin-top: 0px;
}

Kindly modify the value 0px to your preference.

Hope this helps! 🙂

[Trish]

I added the CSS in Appearance > Customize > Additional CSS, the HR block STILL won’t vertically align to the top.

Tried changing the color, but that too has made no difference;

hr.my-hr {
    margin-top: 0px;
    color: gray;
}

and

hr.my-hr {
    margin-top: 0px;
    color: #d3d3d3;
}

[Trish]

Hey Fernando,

Found the separator block offers an “Align top”, and when I selected TOP… the block ignored that.
https://www.awesomescreenshot.com/image/26582455?key=2419361f6c23c9504525b15f3fda549f

Even tried removing the Additional CSS class in the right-hand sidebar, to see if that might be interfering with the Align top option… but that failed, so I put the my-hr back and still… nothing.

[Fernando]

There seems to be no class added to the HR tag. May I know how you’re adding this tag?

If it’s through a separator Block, to confirm, are you adding the class in the Additional CSS classes of the Block?: https://share.getcloudapp.com/6quZ46oz

It should appear on my end if so. Otherwise, if you’re adding this through an html Block, you would need to modify the HTML itself and add the class.

Kindly let us know

[Author]

Posts