Homepage header takes up full viewport, hiding hero image above the fold

[Nwakaego-Ego]

Most appropriate sections of the p5.js website?

Home

What is your operating system?

Windows

Web browser and version

149.0.7827

Actual Behavior

When you land on the homepage, the hero image is not visible without scrolling. The header takes up the full viewport height, pushing the hero image below the fold. This is part of the ongoing CSS audit in #309.

Expected Behavior

The header and hero image should split the viewport equally, 50vh each, so both are visible the moment the page loads, without the user needing to scroll down at all. The minimum total height should be 750px, meaning each section has a minimum of 375px.

Steps to reproduce

Go to p5js.org or beta.p5js.org
On the homepage
Without scrolling, observe how much of the screen the header takes up
Notice the hero image is not visible until you scroll down

Would you like to work on the issue?

Open for anyone to work on

[SOUMITRO-SAHA]

Hi, I'd like to work on this issue.

After investigating, it appears the root cause is that the <header> element uses 100vh on mobile devices, which can push the hero image below the fold due to mobile browser viewport behaviour.

My proposed fix is to use dvh (dynamic viewport height) with a vh fallback for older browsers, while also ensuring the existing 750px minimum height requirement is preserved.

Two files need changes:

• src/layouts/BaseLayout.astro — update the header class
• styles/global.scss — adjust header and hero image height constraints

Could you assign this to me?

[doradocodes]

@SOUMITRO-SAHA I have assigned the issue to you. Thanks!