[Resolved] Space after header element

[letsdoit]

Hello Team,

On landing page of website, there is a slidershow (using header element and smart slider) but there is a margin at bottom which is visible always.

Pls advice how to get rid of that.

Regards

[David]

Hi there,

the height: 100vh; property in this CSS is the problem – remove that to remove the space:

.page-hero {
    background-color: #f8f6f5;
    color: #ffffff;
    text-align: center;
    box-sizing: border-box;
    min-height: 100vh; /* Thus is creating the space */
}

[letsdoit]

Thank you David.

But, I have no such added css in my stylesheet (simple css or additonal css). And it is also not elementor block where I could have set height as 100 vh but through elements.

I know you are right but I cant find a away to remove that css or reset 100 vh somewhere.

[David]

I can’t see where its coming from as its in a cached file.
GO to Appearance > Elements and edit the Header Element – can you see the Full Screen checkbox ?

If you can and its checked then uncheck it.
If you cannot – go to the site header tab and enable Merge with content temporarily now return to see if the Full Screen is checked

[letsdoit]

Appearance > Elements > Header Element – Full Screen checkbox unchecked which fixed the extra space.

This worked. Thanks..

[David]

Glad to hear that

[letsdoit]

Hello David,

but the white space is still visible in table/mobile mode. Any direction on how to fix that?

thanks

[David]

When using a Page Builder you best to enable Page Builder Container: Full Width

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

This removes all the Themes padding as well as making the container full width

[Author]

Posts