[Content] Overlapping Text and UI Elements on p5.js Mobile View

[coseeian]

Title

[Content] Overlapping Text and UI Elements on p5.js Mobile View

Description

In the mobile view of the p5.js website (simulated on an iPhone SE), UI elements and text content overlap. The “Accessibility” button overlaps with the descriptive paragraph text, and the sentence “nurturing community. p5.js” and “every piece of p5.js code.” are partially covered by a large black icon or graphic. This visual clutter affects readability and may hinder accessibility, especially for users with low vision or cognitive impairments.

Steps to Reproduce

Page1

1. Go to /

Page2

1. Go to /reference/

Actual Behavior

Expected Behavior

UI elements and text should not overlap. All content must be clearly readable and visually separated.

Environments

No response

Suggested Fix

No response

Reference

WCAG:

• 1.4.4 Resize Text

What is your operating system?

None

Web browser and version

No response

[reshma045]

@coseeian I'd like to work on this issue, can you assign it to me?

[Iron-56]

Hello there is this issue being worked on currently? If not, can you please assign this to me, I'm quite new to open source contribution but unable to find any beginner level issues I could work on. Thank you, looking for your reply eagerly! @reshma045 @coseeian

[reshma045]

Hi @Iron-56 , I'm currently working on this, but unable to show the progress (because of college work), but you're surely welcome to work on this. Thanks!

[reshma045]

Hi @coseeian, I tried to fix the overlapping text/UI issue by:

1. Adding mobile-specific CSS rules to reposition the Accessibility button.
2. Adjusting margins/padding for the descriptive text to create spacing.
3. Testing with different z-index values to ensure the text stayed above/below the icon as intended.
4. Simulating the iPhone SE viewport in Chrome DevTools to verify changes.

But the issue persists, and the button still overlaps the text, and the icon still covers part of the sentences.

Could you suggest where else I could make changes that might be controlling the button or hero graphic positioning?
Thanks