Fixed container height for mobile browsers

Hi there,

you can remove the CSS from the @media query. So instead of this CSS:

@media (min-width: 769px) {
    #page {
        min-height: calc(100vh - 350px);
    }
}

you do this:

#page {
    min-height: calc(100vh - 350px);
}

Seems like it is stoll not high enough.

You could do this instead:

/* Desktop */
@media (min-width: 769px) {
    #page {
        min-height: calc(100vh - 350px);
    }
}
/* Mobile
@media (max-width: 768px) {
    #page {
        min-height: calc(100vh - 294px);
    }
}

Which uses a different height for the deducted elements ( header , nav , footer ) on mobile.
But the problem is the height of the header changes as the screen size reduces due to the logo rescaling.

Theres no simple and efficient fix to that other then using a fixed size header for mobile.

How do I set a fixed header for mobile?

I'm not sure you need to. If you add up your site header + navigation height, you get 194.8.

So you should be able to do this:

@media (max-width: 768px) {
    #page {
        min-height: calc(100vh - 194.8px);
    }
}

Thanks alot, it works now :-)

You're welcome :)