Skip to content

Fix large space below hero image on mobile (#1222)#1228

Open
Khushi256 wants to merge 1 commit intoprocessing:mainfrom
Khushi256:fix/1222-hero-mobile-image-gap
Open

Fix large space below hero image on mobile (#1222)#1228
Khushi256 wants to merge 1 commit intoprocessing:mainfrom
Khushi256:fix/1222-hero-mobile-image-gap

Conversation

@Khushi256
Copy link
Contributor

Resolves: #1222

Summary

Fixes an issue where certain landscape hero images leave a large empty space below the image on mobile screen sizes (~375px).

This occurred because some hero images did not properly fill the header container, causing visible spacing below the image when rendered on smaller viewports.

Changes

  • Adjusted hero image styling to properly fill the header on mobile
  • Ensured landscape hero images scale and crop correctly
  • Prevented extra vertical space below the hero image
  • Kept desktop layout unchanged

Tested On

  • iPhone SE (375px)
  • Standard mobile screens (<420px)
  • Tablet breakpoints (770px–1024px)
  • Desktop (no regression)

Screenshots

Before (Mobile – ~375px)

p5 js - Comet 11-03-2026 19_00_02

After (Mobile – ~375px)

p5 js - Comet 11-03-2026 18_43_36

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Large space below Hero image on mobile screens

1 participant