[Resolved] Fixed container height for mobile browsers

[Christian Lux]

Is there a way in css to fix the container height for mobile browsers? The one you gave me for desktop doesn’t seem to be working for mobile.

Kind Regards
Christian

[David]

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);
}

[Christian Lux]

Seems like it is stoll not high enough.

[David]

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.

[Christian Lux]

How do I set a fixed header for mobile?

[Tom]

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);
    }
}

[Christian Lux]

Thanks alot, it works now 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts