Section Height Problem

Support
#1

Hi there,

I’ve got a problem with the height of my first section. As you can see on https://www.reha-selbsthilfe.de/ the first section uses a background image and has a custom styling for the height to be fullscreen.

I first set it to 90% which worked just fine until something unexpected happened and the height was just ignored at all so I used the css3 vh unit to do the same.

with % unit:

with vh unit:

So I really don’t get whats wrong with that, because it worked in the first place with %.

Any ideas?

Thx!
Uli

#2

Hello Uli,

Thanks for writing in! You should be using 90vh and not %. To make it the section exactly fullscreen minus the height of the navbar, you should be using height: calc(100vh - 90px );

Please let us know how it goes.

1 Like
#3

Hi RueNel,

thanks for the reply! I figured out why this was happening at all, we just kicked out a script from Hotjar and then this happened. So I guess the script did some general sizing to the site so the percentage worked as a unit.

Well, your solution is better anyway :wink:

Regards
Uli

#4

Glad it’s okay now, and thanks for sharing :slight_smile: