[Resolved] Strange space after hero image in a header

[nik9]

Hello

I was able to create a header in elements and it works as expected. After the header creation for the Landingpage I want to add some page content with Elementor pro. Then I noticed, that there is a big space between the header hero and the first Elementor section. Also with developer tools I was not able to find out where this space comes from. If I try to remove the space with margin top -120 I have a good result on desktop but on mobile it looks bad. Is that space coming from header elements?

[David]

Hi there,

the spacing is from the Separating Space 40px and the Container Top Padding 80px both which are set in Customizer > Layout > Container.

However…. if you’re building your page content with Elementor then you can set the Page Builder Container to Full Width ( or Contained ):

https://docs.generatepress.com/article/page-builder-container/

This removes all the theme padding and spacing.

[nik9]

Hi Dave

Thanks. I see.. but actually I like the default Separating Space 40px and Top Padding 80px on sites like /shop, /my-account, etc. But I don’t like in on /home because it look a little to big. On /home i created a specific header in elements. So maybe I can simply add a CSS there to remove the Separating Space and Top Padding only on that specific site?

Cheers

[David]

Just use the Page Builder Container on your home page:
https://docs.generatepress.com/article/page-builder-container/

It will only affect the pages you set it on.

[nik9]

Thanks for your awesome input! 🙂

Cheers

[David]

You’re welcome

[Author]

Posts