processing
[Content] Overlapping Text and UI Elements on p5.js Mobile View
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
- Go to /
Page2
- 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:
What is your operating system?
None
Web browser and version
No response
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
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!
Hi @coseeian, I tried to fix the overlapping text/UI issue by:
- Adding mobile-specific CSS rules to reposition the Accessibility button.
- Adjusting margins/padding for the descriptive text to create spacing.
- Testing with different z-index values to ensure the text stayed above/below the icon as intended.
- 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
@reshma045 The dropdown menu overlap issue happens because the button has icons on both the left and right sides, both positioned with position: absolute. The text “Accessibility” in the middle is too long, causing it to be covered by the icons. This can likely only be resolved by adjusting the font size. On the homepage, the description area is set to display: flex with a fixed height. The current height is insufficient for the description content. The reference description is being overlapped by the “filter by keyword” section, which is positioned with position: absolute. The top value for this section needs to be adjusted.
@coseeian can you please assign this issue to me? I would like to work on this
