Large space below Hero image on mobile screens

[doradocodes]

Most appropriate sections of the p5.js website?

Home

What is your operating system?

None

Web browser and version

No response

Actual Behavior

For this specific Hero image, there is a large space below the image on mobile screen sizes.

Expected Behavior

The expected behavior is that the image is cropped on mobile screen sizes.

Steps to reproduce

1. Refresh the page until this specific hero image appears
2. Resize the screen to mobile (~375px)

Would you like to work on the issue?

The original contributor of Issue #1185, @Khushi256

[doradocodes]

@Khushi256 Your original fix for PR #1185 fixed majority of the issue but we found one more issue: for hero images that have a landscape cropping, it does not fill in the space of the header (see attached images). We suggest looking into ensuring all the hero images used in the heroImages array fit the header. Along with that, you should remove any line changes that are unrelated to the fix itself, for instance, adding new lines or comments. Please respond if you'd like to continue on this fix!

[ksen0]

Thanks for catching mobile problem @doradocodes. Just chiming in here - this is approved for work and open to either the original contributor or to a new volunteer if @Khushi256 doesn't claim it in the next 7 days:)

[dpoppe7]

Thank you! I'm happy to help in this area if @Khushi256 isn't available. I'll be circling back.

[Khushi256]

Hi @doradocodes , thanks for pointing this out!
Yes, I’d be happy to continue working on this. I’ll look into adjusting the hero image behavior so landscape images properly fill the header area on mobile screens without leaving the extra space. I’ll also make sure the PR only includes the minimal changes related to this fix.
Thanks for the guidance!

[Khushi256]

Hi @doradocodes,
I've opened a PR addressing this issue by adjusting the hero image behavior so landscape images properly fill the header on mobile. I've also removed the extra lines and comments to keep the PR minimal as suggested.
Please let me know if any changes are needed. Thanks!