processing / processing/p5.js-website

Button Text Overlapping Symbol Issue (Mobile Version)

Open
#450 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug QA
Dominant language
MDX
Stars
96
Forks
322
Avg merge
5d 22h
Merged PRs (30d)
8

Description

Hi there,

I've noticed a minor flaw in the UI while I was accessing the website on my mobile. On the Accessibility button, the text is overlapping the symbol, making it hard to read. Here are the details:

Issue: Text on the button overlaps with the symbol.

Location: Landing Page

Screenshot:

Accessibility_p5js

Steps to Reproduce:

Go to the Home Page
Locate the Accessibility button with the overlapping issue
Observe the text and symbol on the button

Suggestions:
Increase the padding or margin between the text and the symbol.

Additionally, I would love to work on this issue and contribute to improving the platform. Please let me know if I can assist in resolving this.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the landing or home page entry point and inspect the Accessibility button shown in the screenshot, along with its mobile layout styling. Reproduce the overlap on a mobile viewport, adjust the spacing so the text and symbol no longer overlap, and verify the button remains readable at the affected size.

Written by the indexing model from the issue text.

Assessment

Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.