[ADD] Add Media Queries for Responsive Design

[IAMAP842]

Add Media Queries for Responsive Design

Description

Enhance the responsiveness of the website by implementing media queries in a separate CSS file and linking it to the main application file.

---

Task Details

1. File to Create:

   • Create a new file named responsive.css in the Codebase/frontend/public directory.

2. Add Media Queries:

   • Use media queries to ensure the application layout adjusts gracefully for different screen sizes, including:
     • Mobile devices.
     • Tablets.
     • Desktops.
   • Define styles for breakpoints (e.g., max-width: 768px, max-width: 1024px) to optimize the design for various devices.

3. Link the CSS File:

   • Link the responsive.css file to the main application file App.jsx located at Codebase/frontend/src/App.jsx.

4. Testing:

   • Verify that the website is responsive across a variety of devices and screen sizes.
   • Test critical components and pages for proper layout adjustments.

5. Follow Pull Request Guidelines:

   • Please refer to the Pull_request_template.md file to create your Pull Request for this change.
   • Ensure code quality and test thoroughly before submitting the Pull Request.

[SHIan-369]

I am interested in contributing to this issue.