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

[Khushi256]

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.

[Yu-Hu-1909]

Hi! I’ve reproduced this issue locally using DevTools at iPhone SE width.
I’m newer to contributing here but comfortable with responsive CSS, and I’d be happy to work on this.If this issue is still unassigned.
Please let me know.

[Khushi256]

Hi @Yu-Hu-1909 . I actually opened this issue and mentioned I'd like to work on it. I've already identified the CSS fix needed in the hero section and I'm ready to submit a PR once I get assigned. I appreciate your interest though!

[ksen0]

Thank you for finding the issue, I've assigned it! Two of the website stewards, @doradocodes and @Nwakaego-Ego, verified the issue and saw that the “Welcome to p5.js” text is overlapping with the Hero image on iPhone SE screen widths. They also found the text also overlaps on certain tablet breakpoints (770px to 1024px), so that would be good to test as well, but just the <420px width. Looking at your approach, they suggested looking into if there is a fix to completely prevent them from overlapping, regardless of width, which I think makes sense.

[Khushi256]

Hi @ksen0, thank you for assigning this!

I appreciate the additional notes from @doradocodes and @Nwakaego-Ego about the overlap at tablet breakpoints (770px - 1024px). I’ll make sure to test across those widths as well.
I’ll explore a solution that prevents the heading and hero image from overlapping at any viewport width, rather than limiting the fix to a specific breakpoint.

I’ll begin working on this shortly and will open a PR with the fix and before/after screenshots once it’s ready.

[Khushi256]

Hi @ksen0,

I’ve implemented the hero overlap fix and verified it locally. However, the CI build is failing due to a getCurationSketches 500 error during static build, even though I didn’t modify any API-related files.
Because of this, I’m currently unable to successfully open the PR. Could you please guide me on how this API-dependent build step should be handled?

Since this is my first contribution here, I’d really appreciate any direction. Thank you!

[ksen0]

Hi @Khushi256 , thanks for checking in! The build fail is outside of your PR. You can monitor updates here: #1187 This is affecting multiple PRs, so when the problem is resolved I will be going through all the PRs.

However, looking at your PR, please check the changes here: https://github.com/processing/p5.js-website/pull/1185/changes I see very many changes unrelated to the issue. Please keep the PR minimal, otherwise review is difficult. Please revert unrelated fixes with the curation API, those are duplicating work that others are doing.

Once the PR is minimal and fixes the overlap problem, even if the build doesn't pass, no worries! Once the problem is resolved (in the other issue, not in your PR) then I'll retrigger the build during the review. I hope this clarifies, and welcome to the project:)

[Khushi256]

Hi @ksen0 ,

Thanks so much for the clarification - that definitely clears things up for me.
I understand now. I’ll revert the unrelated API and config changes and keep the PR focused only on the hero overlap fix to make review easier.
Appreciate the guidance, and thank you for the welcome! I’m looking forward to contributing more.

[Khushi256]

Hi @ksen0,

I’ve cleaned up the PR and reduced it to a single commit containing only the hero overlap fix. All unrelated changes have been removed.
Please let me know if anything else should be adjusted. Thank you!