Make homepage less stupidly big on large screens about principles.design HOT 3 CLOSED

Came here to ask this. Why is the header set at height: 100%? Took me nearly a minute to realise there was any content below the fold and even then that was only since I had scrollbars (which other platforms are starting to lack).

Even just setting the header to height: 75% gives you a peek at the content below without sacrificing your desired look:

from principles.design.

Yeah, it's a work in progress so there's no real set reasons why stuff has been done this way. Still sort of experimenting with layout but more importantly what the content on the home page should be. I'll probably remove the 100% fixed height and just allude to what's below by actually showing it. 75% seems like it would work for now, will test it as on smaller screens it might overflow the title. Thanks!

from principles.design.

@benbrignell @michaeldfallen I prefer using viewport units to set the height for hero's or setting the height, min-height, and max height of various elements to create different layouts.

For example you could set a max-height: 85vh to be sure you never push the below content below the fold. Similarly, for a more image centric hero then you could set the height: 100vh.

Perhaps what would be beneficial for this exact example would be using viewport units to create fluid text on the hero. This prevents that odd jump in the text size when the `@media (min-width: 700px) media query is active/inactive.

Here's an example where I set the hero text to font-size: calc(112.5% + 8vw).

from principles.design.