Text Overflow Issue in Contact Info Section

[sheezah01]

Is there an existing issue for this?

• [✓ ] have searched the existing issues

What happened? The Contact Info section on the website exhibits a text overflow issue when viewed on mobile devices or in responsive design mode at a screen width of approximately 535 pixels. The email address is partially hidden, impacting user accessibility to crucial contact details.

Proposed Solution:

1. Enable Text Wrapping: To ensure that long email addresses and similar text fit neatly within their designated areas, we should apply CSS word wrapping. This will allow text to break onto a new line instead of overflowing beyond its container, making it more readable on smaller screens.

2. Enhance Responsiveness: We can improve how the site looks on mobile devices by using CSS media queries. This approach lets us adjust the size of text and the dimensions of containers based on the screen size, ensuring that everything remains user-friendly and accessible, regardless of the device being used. Screen shot

What browsers are you seeing the problem on? Chrome

Record

• [✓ ] I agree to follow this project's Code of Conduct
• [ ✓] I'm a GSSOC contributor
• [✓ ] I want to work on this issue
• [✓ ] I'm willing to provide further clarification or assistance if needed.

Please let me know if the issue will be assigned to me.

[github-actions[bot]]

🙌 Thank you for bringing this issue to our attention! We appreciate your input and will investigate it as soon as possible !

[AsifQamar]

@mansiruhil13 please assign me this