Skip to content

Conversation

@Anubhav2k3
Copy link

Description:

This pull request addresses and solves issue #210. It enhances the form component's responsiveness to improve the user experience across different devices and screen sizes.

Changes Made:

  1. package.json: Added new dependency called classnames.
  2. ArticleForm.jsx: Refactored form layout, improved state handling, and updated button design and loading logic.
  3. CountryPickList.jsx: Replaced continent class with flex-1, making it responsive.
  4. Menu.jsx: Added className prop for custom styles using classnames.
  5. index.css: Adjusted button width for responsiveness and cleaned up redundant styles.

Checklist:

  • Tested the form on various devices and screen sizes to ensure responsive behavior and consistent appearance.
  • Verified that all form elements are functional and visually appealing across different screen resolutions.
  • Ensured that the form maintains accessibility standards and adheres to project design conventions.

Thank you!

Screenshot 2024-09-08 215204

Screenshot 2024-09-10 174639

Screenshot 2024-09-10 174705

@netlify
Copy link

netlify bot commented Sep 10, 2024

Deploy Preview for emingi ready!

Name Link
🔨 Latest commit 93d7d84
🔍 Latest deploy log https://app.netlify.com/sites/emingi/deploys/66e03953db8bd0000812f237
😎 Deploy Preview https://deploy-preview-246--emingi.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.

@CREDO23
Copy link
Collaborator

CREDO23 commented Sep 21, 2024

Hi @Anubhav2k3, the form is responsive ! Thanks
But now, it takes too much space on small devices
Can you adapt it ?
Screenshot from 2024-09-21 17-44-46
Screenshot from 2024-09-21 17-43-59

@Anubhav2k3
Copy link
Author

For large screen sizes, should I keep the design the same or switch to a single-column form layout to reduce the width and make it more vertical?
For small screen sizes, should I decrease the width of the form for better responsiveness?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants