Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account

Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Element formatting issues

jyotsna4amit
July 5, 2025 at 5:22 am

Hello,

I have a sidebar element for blog posts.

The format looks very weird and there is a lot of space between the image and title. What could be the reason?

See this https://postimg.cc/CBcrpbNP

I want it to look something like this: https://postimg.cc/TLn2kYJ3

Kindly help.
Ying
July 5, 2025 at 1:09 pm

Hi there,

You’ve set the image’s parent container width to be 30%, try to increase the value.
jyotsna4amit
July 5, 2025 at 8:46 pm

Hello Ying,

Thanks for the help.

I changed the grid’s settings to this: 3fr 5fr (BTW, can you share any documentation on what these dimensions mean?). Pls see the image https://postimg.cc/Kkrz7Mdf

Its looking better.

But there is a lot of gap between the rows. Please see this. https://postimg.cc/fkDkz89r

How can I reduce that?

Cheers!
Alvind
July 6, 2025 at 5:48 pm

Hi there,

The Fractional Unit (fr) is a standard CSS concept used in grid layouts. You can find plenty of resources explaining it, but this article by DigitalOcean provides a clear and concise explanation:
https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit

To reduce the gap between rows, try removing the bottom margin from the Image block.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.