Made website Responsive to every screen size including Mobile

[omChauhanDev]

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):

1. In laptop : 1024px x 865px
   Before
   
   After
   

2. In iPhone 12 pro :
   Before
   
   After
   

3. While Creating Tutorial - Tutorial Page
   Before
   
   After
   

4. In iPad Air - Profile page
   

5. 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)
• 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.

[omChauhanDev]

Kindly review my work and share your precious feedback / changes (if any).
@shivareddy6 @Sarfraz-droid @ABHISHEK-PANDEY2 @Maahi10001

[Sarfraz-droid]

Hi @om-chauhan1 , Thank you for contributing.

Some tests are failing in your PR. can you fix and commit for the same? Thanks