WordPress-Theme Twenty Twenty Four-customizing: how to do that - a Gutenberg special question...

[thedhubs]

Good day  - hello dear Neowin-friends,

 

today i have a special question: and i hope that it fits here into this sub-forum:

I am currently customizing a WP-Theme - a Twenty-Twenty-Four (TT4)

See below the  full story and some images:

 

i I've tried other things – as far as I'm concerned, there are occasional problems with the columns and spacing. Specifically, my question is: how can I "reduce" this spacing?

 

Reregarding the elements – on the theme backend – I seem to have a few options and settings. But where exactly can I reduce the spacing between the image and the text – in other words, between the image of the card and the text – which are arranged in two columns – and how can I reduce this spacing? I've already tried a few things – and I'll keep looking. Maybe you have a tip for me – here's the backend view:

 

 

 

Look forward to hear from you
Regards

[thedhubs]

g day dear friends,

Update : found some interesting stuff here in this article :

 
Everything you need to know about spacing in block themes
https://developer.wordpress.org/news/2023/03/everything-you-need-to-know-about-spacing-in-block-themes/

 

And in the yt-Clips:

Ho to add and remove space on WordPress theme blocks
https://www.youtube.com/watch?app=desktop&v=fk2rItagF4M

how to add and remove Empty Spaces

 

but untill now i did not was able to fix the issues.

i will try all and come back

 

updatE: at the moment i am asking myself how to get text into the rigtht column

 

Edited May 3, 2025 by thedhubs

[zayanhani]

Hi there! Great question and yes, the Twenty Twenty-Four theme (TT4) + Gutenberg does have a few quirks when it comes to spacing and columns.

To reduce the spacing between the image and the text in a two-column layout, here are a few things to try:

 1. Adjust Block Spacing (Direct Method)

Click on the Column Block (the outer wrapper that holds both your image and text).

In the right sidebar, under "Block" > "Dimensions", look for the "Block spacing" setting (sometimes called “Gap”).

Reduce the value (in px, em, or %) to tighten the space between elements inside that column.

2. Use Padding & Margin Controls

Click on the Image block, and then the Text block individually.

Under “Dimensions”, adjust the Margin of the Image or Text block (especially bottom or top margin) to reduce extra white space.

Try setting margins to 0 or a small number like 8px.

3. Use Group Block (Optional)

If the spacing controls aren’t behaving:

Wrap the image + text inside a Group block.

Then apply padding/margin settings to the inner blocks for better control.