🐞[bug]: Not responsive on mobile

[Suhani180]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

The pop-up overlay that promotes a sign-up offer is misaligned or not fully responsive on mobile. The text and input field appear cut off, and the input field for email entry isn’t fully visible, making it difficult for users to interact with the form. Additionally, the close button for the pop-up is either missing or not easily accessible, which could prevent users from dismissing the overlay.

Expected behavior

1. Responsive Pop-up Design: Adjust the layout of the pop-up to fit smaller screens by scaling down the font size, padding, and spacing of elements.
2. Full Viewport Fit: Ensure the pop-up is fully visible on the mobile viewport by setting a maximum width and height that adapts to screen size.
3. Close Button Accessibility: Make sure a close button is visible and accessible, so users can easily dismiss the pop-up if they wish.

Add ScreenShots

What browsers are you seeing the problem on?

No response

Record

• [X] I have read the Contributing Guidelines
• [X] I'm a GSSOC'24EXTD contributor
• [X] I have starred the repository

[github-actions[bot]]

Hi there! Thanks for opening this issue @Suhani180!. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.

[Suhani180]

Hi there! Thank you for the warm welcome! I’m excited to contribute to this open-source project and can’t wait to collaborate with the team. I look forward to your response and am eager to help make this project even better!