Description
This PR focuses on improving the responsiveness of the application.
This PR does the following:
Adds responsive design features to ensure the layout adapts well to different screen sizes (desktop, tablet, mobile).
Fixes layout issues that occurred on smaller screens.
Updates the CSS to include media queries for better responsiveness.
Related Issues
Fixes #14 : Improved responsive designs.
Changes
Added media queries to the CSS to ensure components adjust to different screen resolutions (e.g., max-width: 768px for tablets and max-width: 480px for mobile).
Refactored the header and footer components to be more responsive, ensuring proper alignment and spacing across devices.
Adjusted grid layouts and containers to scale proportionally on smaller screens.
Fixed a bug in the sidebar that caused it to overlap with content on mobile screens.
Testing Instructions
Pull this branch.
Run npm install to install any new dependencies.
Open the app in the browser and test the layout by resizing the window or using the developer tools' device emulator.
Verify that:
The navigation bar, sidebar, and main content area adjust properly on mobile and tablet views.
There are no overlapping or layout-breaking issues.
UI components like buttons, forms, and text remain user-friendly and readable.
Additional Context
This PR enhances the application's user experience on mobile and tablet devices, ensuring it’s fully responsive and more accessible across various platforms.
Checklist
I have performed a self-review of my code.
I have commented my code, particularly in hard-to-understand areas.
My changes generate no new warnings.
I am working on this issue under GSSOC-Extended.
Description This PR focuses on improving the responsiveness of the application.
This PR does the following: Adds responsive design features to ensure the layout adapts well to different screen sizes (desktop, tablet, mobile). Fixes layout issues that occurred on smaller screens. Updates the CSS to include media queries for better responsiveness. Related Issues Fixes #14 : Improved responsive designs.
Changes Added media queries to the CSS to ensure components adjust to different screen resolutions (e.g., max-width: 768px for tablets and max-width: 480px for mobile). Refactored the header and footer components to be more responsive, ensuring proper alignment and spacing across devices. Adjusted grid layouts and containers to scale proportionally on smaller screens. Fixed a bug in the sidebar that caused it to overlap with content on mobile screens. Testing Instructions Pull this branch. Run npm install to install any new dependencies. Open the app in the browser and test the layout by resizing the window or using the developer tools' device emulator.
Verify that: The navigation bar, sidebar, and main content area adjust properly on mobile and tablet views. There are no overlapping or layout-breaking issues. UI components like buttons, forms, and text remain user-friendly and readable.
Additional Context This PR enhances the application's user experience on mobile and tablet devices, ensuring it’s fully responsive and more accessible across various platforms.
Checklist I have performed a self-review of my code. I have commented my code, particularly in hard-to-understand areas. My changes generate no new warnings. I am working on this issue under GSSOC-Extended.