Made website Responsive to every screen size including Mobile
Description
I have made every component responsive including the home page (without auth), home page (with auth), tutorials page, profile page and so on.
Now everything is working fine on every type of screen without any overflow or underflow of content which previously was happening with certain components
Related Issue
Fixes #948 Fixes #916
Motivation and Context
This change is required and users are unable to view/use our project on their mobile or devices with different screen sizes. These changes made our project compatible with different platforms.
How Has This Been Tested?
Tested locally by varying screen sizes under the inspect element section of browser.
Screenshots or GIF (In case of UI changes):
-
In laptop : 1024px x 865px Before
After
-
In iPhone 12 pro : Before
After
-
While Creating Tutorial - Tutorial Page Before
After
-
In iPad Air - Profile page
-
In Tablet - Tutorials page
Types of changes
- [ x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [x] Breaking change (fix or feature that would cause existing functionality to change)
Checklist:
- [ x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] All new and existing tests passed.
Kindly review my work and share your precious feedback / changes (if any). @shivareddy6 @Sarfraz-droid @ABHISHEK-PANDEY2 @Maahi10001
Hi @om-chauhan1 , Thank you for contributing.
Some tests are failing in your PR. can you fix and commit for the same? Thanks