Calc Doesn't Seem to Be Working on Header

[AdvocateGroup]

Hello. The calc function doesn’t seem to be working for the height of the first bar in my header. Am I doing something incorrectly? I would like it to take up 100% of the height of the screen minus the bar, which is 8 em.

I have tried calc(100% - 8em) but it doesn’t seem to have any effect. Can you please help?

The link to my site is: https://prothemetutorials.com.

[friech]

Hi Paul,

Thank you for writing in, try calc(100vh - 8em) instead. Please follow the following link, there is an explanation there why the % did not work.

Viewport units: vw, vh, vmin, vmax

Hope it helps,
Cheers!

[AdvocateGroup]

I notice on tablets and phones it doesn’t account for the UI so the content ends up being blocked. Can you set separate heights for different screen sizes?

[ruenel]

Hello Paul,

If you want to set heights to different browser screens, in your bar settings, find the “Customize” tab and insert this element css:

@media(max-width: 767px){
  $el {
    height: calc(100vh - 6em);
}

Please adjust the height that is needed for the smaller screens.

Hope this helps.