Skip to content

Comments

Fix hero heading overlap on mobile and tablet viewports #1185

Open
Khushi256 wants to merge 6 commits intoprocessing:mainfrom
Khushi256:fix/1061-hero-overlap
Open

Fix hero heading overlap on mobile and tablet viewports #1185
Khushi256 wants to merge 6 commits intoprocessing:mainfrom
Khushi256:fix/1061-hero-overlap

Conversation

@Khushi256
Copy link

Resolves: #1061

Summary

Fixes an issue where the "Welcome to p5.js" heading overlapped the hero image on small mobile viewports (<420px) and certain tablet breakpoints (770px–1024px).
The overlap occurred due to absolute positioning and insufficient vertical spacing in the .home-hero layout.

Changes

  • Switched hero to stacked layout on mobile/tablet
  • Removed overlapping positioning
  • Fixed spacing and z-index conflicts
  • Kept desktop layout unchanged

Tested On

  • iPhone SE (375px)
  • <420px widths
  • 770px–1024px tablet breakpoints
  • Desktop (no regression)

Screenshots

Before (iPhone SE – 375px)

p5 js - Comet 20-02-2026 12_31_29

After (iPhone SE – 375px)

p5 js - Comet 20-02-2026 12_31_14

@Khushi256 Khushi256 changed the title Fix hero heading overlap on mobile and tablet viewports #1061 Fix hero heading overlap on mobile and tablet viewports Feb 20, 2026
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.

Bug: "Welcome to p5.js" text overlaps hero image on iPhone SE viewport

1 participant