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

Made Torch Effect Login Form component responsive #1433

Conversation

dpgaharwal
Copy link

@dpgaharwal dpgaharwal commented Dec 29, 2024

Fixes Issue🛠️

Closes #1421

Description👨‍💻

Improved responsiveness for the Torch Effect Login Form:

  1. Added proportional resizing for the toggle button and login box for better responsiveness.
  2. Incorporated media queries for screen sizes:
    • 768px: General adjustments for tablets.
    • 480px: Optimized for small mobile screens.
    • 320px: Tweaked sizes for very small devices.

Type of Change📄

  • Style (non-breaking change which improves website style or formatting)
  • Responsiveness (non-breaking change which improves UI/UX on different screen sizes)

Checklist✅

  • I am an Open Source contributor
  • I have performed a self-review of my code
  • My code follows the style guidelines of this project
  • I have commented on my code, particularly in hard-to-understand areas

Screenshots/GIF📷

Here is the video

recording-2024-12-29-214417_a92wIK6c.mp4

Copy link

netlify bot commented Dec 29, 2024

Deploy Preview for beautiify ready!

Name Link
🔨 Latest commit a6e0667
🔍 Latest deploy log https://app.netlify.com/sites/beautiify/deploys/67740d9a31998300083600c8
😎 Deploy Preview https://deploy-preview-1433--beautiify.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

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.

Hey @dpgaharwal, Welcome to the project Beautiify! 🎊
Thanks for your contribution! Your effort makes this project better. Keep it up! 🙌
Please wait for the PR to be reviewed. Happy Coding!! ✨

@dpgaharwal dpgaharwal changed the title stylefix/add-reponsiveness-to-torch-form Fix#1421 : stylefix/add-reponsiveness-to-torch-form Dec 29, 2024
@Rakesh9100
Copy link
Owner

Rakesh9100 commented Dec 29, 2024

Fix the responsiveness of background shift properly below 500px, and center the content @dpgaharwal

image

@Rakesh9100 Rakesh9100 added the question 🤔 Further information is requested label Dec 29, 2024
@Rakesh9100 Rakesh9100 changed the title Fix#1421 : stylefix/add-reponsiveness-to-torch-form Made Torch Effect Login Form component responsive Dec 29, 2024
@dpgaharwal
Copy link
Author

@Rakesh9100 Corrected the reponsiveness of background shift under 500px.

change2.mp4

@dpgaharwal
Copy link
Author

dpgaharwal commented Dec 30, 2024

@Rakesh9100 See my latest "Much Improved responsiveness" commit,I changed some to make more reponsiveness than previous.
fixed below 500px background shift issue also.

Below is the video of the latest one.

change3_improvedone.mp4

@Rakesh9100 Rakesh9100 merged commit e63347e into Rakesh9100:main Dec 31, 2024
4 checks passed
Copy link

Congrats, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to my project 🚀 Keep Contributing!! ✨ @dpgaharwal

@Rakesh9100 Rakesh9100 added Hard Complex or challenging task Completed 🥳 PR successfully merged and issue resolved on completion KWOC KWOC Open Source Program and removed question 🤔 Further information is requested labels Dec 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Completed 🥳 PR successfully merged and issue resolved on completion Hard Complex or challenging task KWOC KWOC Open Source Program
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Style] Make Torch Effect Login Form component responsive
2 participants