processing
Button Text Overlapping Symbol Issue (Mobile Version)
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:
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.
Thanks @Pritish-Priyam. It seems like a design issue for small mobile devices. I'm tagging the website designers @stefanietam @tyler-yin to offer some insights.
Hello! Thank you for flagging this visual bug. Based on the designs, there should be a smaller gap between the language and accessibility dropdown menu/button in our design. The column-gap should be 20px (not 40px) for mobile widths.
See screenshot below for reference:
@tyler-yin 40px seems to work quite effectively when it comes to major mobile devices, but you'll observe that on a width of 375px on devices like the iPhone SE it breaks down. I believe this can be reproduced on various Fold devices as well.
Is it worth adding a breakpoint for the same in the global CSS file?
Sorry for the late reply. @eebadreza If you are still interested, I'll assign the issue to you, otherwise I can assign @aakansha2304 to work on this. Thanks.
