Overflow and Overlap of Contact Us Boxes on Contact Us Page

[rajveeerr]

Current behaviour

The contact us boxes on the Contact Us page are behaving incorrectly:

• They are overflowing in the Y direction, extending beyond the max width of the device.
• The boxes are overlapping with the Contact Us form, making the layout look cluttered and affecting usability.

Problem:

• The overflow causes the boxes to break the page layout on smaller screens.
• The overlap makes it difficult for users to fill out the form and understand the information in the boxes.

Suggested Fix:

• Adjust the styling and dimensions of the contact us boxes to fit within the container and prevent Y-direction overflow.
• Add appropriate margins or padding to maintain spacing between the boxes and the form.

Expected behaviour

• The contact us boxes should be contained within the max width of the device and should not overflow.
• There should be enough space between the contact us boxes and the form to avoid any overlap and ensure clear visibility.

Reproduction steps

1. Open the Contact Us page on any mobile device or smaller screen.
2. Observe that the contact us boxes overflow beyond the screen's width and overlap with the form.

Screenshots

Browsers

All Browsers

OS

No response

Are you contributing for a program ?

GSSoC23

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I am willing to work on this issue (optional)
• I am a GSSoC'23 contributor

[github-actions]

Hello @rajveeerr!
Thank you for raising this issue.

Please make sure to follow our Contributing Guidelines.
Don't forget to ⭐ our Imagine AI.

Our review team will carefully assess the issue and reach out to you soon!
We appreciate your patience!

[github-actions]

To reduce notifications, issues are locked. Your issue will be unlocked when we add the label, gssoc23.