Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update CSS styles for signup form: #110

Conversation

pranavmugatkar
Copy link

Problem Description

When users clicked the "Signup" button on the application, the signup form content was rendered outside the visible area of the page, leading to a poor user experience. The issue stemmed from the CSS styles applied to the signup form, which did not properly handle overflow and positioning. As a result, the form was difficult to view and interact with, causing confusion and frustration for users.

Specific Issues Identified:

  • Overflow Behavior: The signup form was not contained within its parent container, allowing it to escape the viewport.
  • Positioning: The form's absolute positioning was not effectively centered, which could lead to misalignment on different screen sizes.
  • Transition Effects: The transition effects for showing and hiding the form were not implemented optimally, contributing to a jarring experience when toggling the form's visibility.

Solution Implemented

To resolve these issues, the following changes were made to the CSS and layout of the signup form:

  1. Overflow Handling:

    • Implemented CSS rules to manage overflow within the signup form’s container, ensuring that content remains visible and contained within the viewport.
    • Added overflow: hidden; and overflow: auto; properties where necessary.
  2. Improved Positioning:

    • Adjusted the positioning of the signup form to use absolute positioning with calculated top, left, and transform properties. This allows the form to be centered correctly within the viewport.
    • Set a high z-index value to ensure that the form overlays other content effectively.
  3. Responsive Design:

    • Added styles to make the signup form responsive, ensuring it maintains a suitable width on different devices. This included setting a maximum width and using flexbox for alignment.
  4. Enhanced Transition Effects:

    • Improved the transition effects for showing and hiding the signup form by adjusting the opacity and ensuring smoother visibility toggling.
    • Used transition: opacity 0.5s ease; to enhance the user experience during form visibility changes.

Result

After implementing these changes, the signup form now behaves as intended:

  • It appears correctly centered within the viewport without escaping the visible area when clicked.
  • The user experience has improved significantly, with smoother transitions and better alignment of the form elements.
  • Overall, these adjustments contribute to a more polished and user-friendly signup process.

e

- Set proper overflow handling
- Ensure fixed positioning within viewport
- Improve transition effects for better user experience
Copy link

vercel bot commented Oct 21, 2024

@pranavmugatkar is attempting to deploy a commit to the sanchitgeez's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Boom! Your pull request just flew into the Investra HQ. High fives all around! Our team of tech wizards will check it out and get back to you faster than you can say 'code ninja!' Thanks for leveling up the project!

@SanchitGeez SanchitGeez added gssoc-ext Isssue under GSSOC extended gssoc Issue Under GSSOC level1 GSSOC: Level 1 hacktoberfest hacktoberfest-accepted labels Nov 9, 2024
@SanchitGeez
Copy link
Owner

Insignificant changes

@SanchitGeez SanchitGeez closed this Nov 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
gssoc Issue Under GSSOC gssoc-ext Isssue under GSSOC extended hacktoberfest hacktoberfest-accepted level1 GSSOC: Level 1
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants