Bug: "Welcome to p5.js" text overlaps hero image on iPhone SE viewport #1061
Description
Most appropriate sections of the p5.js website?
Home
What is your operating system?
Windows
Web browser and version
Google Chrome: 143.0.7499.147 (Official Build) (64-bit) (cohort: Stable)
Actual Behavior
- On iPhone SE width, the “Welcome to p5.js” heading overlaps the hero image.
- Parts of the text sit on top of the photo, reducing readability and making the layout feel broken on smaller devices.
Screenshots
Expected Behavior
- The “Welcome to p5.js” text should appear clearly below (or above) the hero image with consistent spacing.
- Text should not overlap any part of the image, and the heading should remain fully legible on small mobile screens.
Steps to reproduce
- Open https://p5js.org/ in a desktop browser.
- Open DevTools and switch to the device toolbar (Responsive Design Mode).
- Select the iPhone SE preset (375px width) and reload the page.
- Scroll to the top hero section where the large image and “Welcome to p5.js” heading appear.
Proposed fix:
- Add a mobile breakpoint around 375–420px width.
- Decrease the heading font-size / adjust line-height.
- Increase spacing between the hero image and “Welcome to p5.js” heading so they no longer overlap.
- Verify that larger mobile and desktop layouts stay unchanged.
Would you like to work on the issue?
Yes, I’d like to work on this bug and can submit a PR with the CSS fix and before/after mobile screenshots.
My plan is to:
- Adjust the hero section typography and spacing for narrow viewports (around iPhone SE width).
- Ensure the “Welcome to p5.js” text no longer overlaps the image.
- Keep the existing layout unchanged on larger screens.
I also have experience with responsive UI, so I’d be happy to help with other similar styling issues on the p5.js website.