gap between header and post content

Resolved rickvdvulkaan
(@rickvdvulkaan)

3 years, 9 months ago

Hello. I’m experimenting with the twenty-twenty-two theme, and there are 2 things which are bugging me, and i’m eager to figure this out before continuing.

I created a page template with a header and a post content block beneath it. In the site editor the blocks seem to touch, but on live website there is always a noticeable gap between this header and the content.

All the margins, padding settings are set to zero, i really don’t get it. How can i get rid of this gap?

By the way, i did search for this, and found a topic where somebody had an answer regarding css/html, but i have zero knowledge on how to apply this, so i wanted to reply, but the topic was closed.

Other question: When editing a page, there is a very simple button to make a block use the full width of the page, but how on earth do i do that in the template editor?

Anyway, really exited to get this to work, the speed test results are amazing compared to similar designs built with for example elementor, and the block editor/template manager feels like it’s going in a wonderful direction.
Thanks!

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

enoughtimeto
(@enoughtimeto)

3 years, 9 months ago

I’ve just started exploring FSE, and had the same question about the gaps. It’s happening to me when I add consecutive Cover blocks within a page – there are gaps between them. Even when using pre-built patterns, in the editor they touch, but on the published page there are gaps.

Moderator Kathryn Presner
(@zoonini)

3 years, 9 months ago

Hi @rickvdvulkaan! It looks like you’re using some Kadence blocks that aren’t part of WordPress core. Could you please try using only the core blocks instead, so I can have a look and see where the gap issue might be coming from in core?

Other question: When editing a page, there is a very simple button to make a block use the full width of the page, but how on earth do i do that in the template editor?

It sounds like you’re talking about the Alignment option. Not all blocks have it as an option, but many do. For example, here’s where to find the option for the Post Featured Image block in a template.

If you’re still not finding it, let me know which specific type of block you’re trying to edit.

@enoughtimeto I’d love to help you with this. Could you please start your own thread, provide a link to your site, and I will be happy to help you troubleshoot there!

enoughtimeto
(@enoughtimeto)

3 years, 9 months ago

@zoonini Thank you – I’m still working my way through the FSE courses, so if I don’t find my answer there then I’ll come back and ask in my own thread.

Moderator Kathryn Presner
(@zoonini)

3 years, 9 months ago

@enoughtimeto Sounds good!

Thread Starter rickvdvulkaan
(@rickvdvulkaan)

3 years, 9 months ago

Hi Kathryn!

i added a column on the very top of the page now, (the red one), and the header to a standard column as well. But eventually, i think i need something like the kadence block, as i need a video background which doesn’t seem possible with the default blocks?

For the full width issue, i can indeed use the Alignment options in the page editor, but as soon as i dive into the template-editor i don’t see the same options anymore (see screenshot below)
https://drive.google.com/file/d/1cL_xlBmEMizaUSYvPYKPVxo6_J6xE3sA/view?usp=sharing

Moderator Kathryn Presner
(@zoonini)

3 years, 9 months ago

i added a column on the very top of the page now, (the red one), and the header to a standard column as well.

Thanks! I still see Kadence blocks all over the homepage.

Sorry I wasn’t clear enough here. For testing purposes, could you please create a page with:
– no Kadence blocks
– just two blocks where there’s a gap between them that you’d like to eliminate?

I’ll be glad to have another look then.

But eventually, i think i need something like the kadence block, as i need a video background which doesn’t seem possible with the default blocks?

The Cover Block allows for a video background, with other elements overlaid on top. Would that work?

Cover Block

For the full width issue, i can indeed use the Alignment options in the page editor, but as soon as i dive into the template-editor i don’t see the same options anymore (see screenshot below)

I’m not able to access that screenshot, would you be able to set it to public?

Please let me know:

– which template you’re editing
– which block you’re missing the alignment options on

Thanks!

Thread Starter rickvdvulkaan
(@rickvdvulkaan)

3 years, 9 months ago

Hi again Kathryn, thanks for being so patient with me!

I adjusted the page, with just one red block, and a header, referring to the header template. i also think the screenshot is now available to anyone: https://drive.google.com/file/d/1cL_xlBmEMizaUSYvPYKPVxo6_J6xE3sA/view?usp=sharing

The cover block is a great tip, i was kinda hoping for an option to link to for example youtube, but i think this will work just fine.

Moderator Kathryn Presner
(@zoonini)

3 years, 9 months ago

Thanks @rickvdvulkaan, that makes things much clearer. 🙂

The gap below your Header element is coming from the default margin-bottom: 1.75em on the Columns block, as you can see here in the browser inspector:

There are be a few options to eliminate this gap:

– If you don’t need to have your header in columns, remove your header elements from the Columns block so the bottom margin is not applied
– Add a custom CSS class to the Columns block (in the Advanced section on the block) and then add custom CSS to eliminate the bottom margin on that one block (add /wp-admin/customize.php to your URL to get to the CSS editor)

Let me know how it goes!

Thread Starter rickvdvulkaan
(@rickvdvulkaan)

3 years, 9 months ago

thank you Kathryn! really helpful.

Moderator Kathryn Presner
(@zoonini)

3 years, 9 months ago

Great, am glad to hear! I’ll go ahead and mark this one as resolved.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘gap between header and post content’ is closed to new replies.

Tags