Improved Form Responsiveness

theBeginner86 commented 3 years ago

Related Issue

In this PR, I have solved the responsiveness of the form of our website. I have used standard breakpoints with media query to solve this issue.

Closes: #173

Describe the changes you've made

I have made changes in the following files:

styles.css Here, I have used media query and added following breakpoints: <=767px(for mobile devices), >=768px & <=1199px(for tablet and medium sized displays), and >=1200px(for desktops and larger screen devices). Then, I have just added few paddings, set the widths and corrected the margins.
form.jsx There I changed the class from col-sm-2 to col-sm-3 for two proper alignment of the input boxes.

Type of change

What sort of change have you made:

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Enhancement in the existing features
[ ] Other

Mention any unusual behaviour of your code (Write NA if not)

Any unusual behaviour of your code: NA

Checklist:

[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[ ] I have commented my code, particularly whereever it was hard to understand.
[x] My changes generate no new warnings.
[x] I have verified/tested my code by running it locally.

Additional Info (optional)

Any additional information you want to give:

For smaller display mobile devices:
For medium to high display mobile devices:
For tablets and medium display computers:

-For desktops and larger devices:

theBeginner86 commented 3 years ago

@Namanl2001 I have made the requested changes, Please review it.

Namanl2001 commented 3 years ago

Can you please add a screen shot for 360 X 640 resolution?

theBeginner86 commented 3 years ago

To fix it I reduced the width of .modal-content to 310px. is this fine now?

theBeginner86 commented 3 years ago

I made the requested changes, and also added a separate media query to handle uncertainty in the responsiveness. Let me know how it looks now.

theBeginner86 commented 3 years ago

Made the changes. @Namanl2001 When I was testing it earlier, it was fine then. But now when I checked it there was a problem with the heading as you pointed out. Thank you for pointing it out to me. Next time will try to be more cautious.

theBeginner86 commented 3 years ago

LGTM! Thanks for the super quick changes. Feel free to pick more issues.

I am happy to help. 😁

Namanl2001 / MERN-Gurujii-dev