Data-Sculptor-X / VOJ-ReactJS

12 stars 29 forks source link

Add some Responsive features #26

Closed Shalinis19137 closed 1 month ago

Shalinis19137 commented 1 month ago

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.

netlify[bot] commented 1 month ago

Deploy request for voiceofjustice pending review.

Visit the deploys page to approve it

Name Link
Latest commit a6cab4a485ea1c459014ca15c4d5a4ab6c77f90b
Dbrightson commented 1 month ago

Those are some amazing changes @Shalinis19137 ...Thanks a lot for your contribution.

Shalinis19137 commented 1 month ago

Thanks alot sir