This pull request addresses the content overflow issues within the responsive layout of the waste management section. It ensures that all elements are displayed correctly across various screen sizes without any misalignment or overflow, enhancing the user experience and maintaining design integrity.
-Fixed Card Overflow: Adjusted CSS properties to ensure that the waste classification cards do not overflow their container on smaller screens.
-Responsive Design: Implemented media queries to ensure the layout adjusts fluidly between different device sizes, improving accessibility on mobile devices.
-Consistent Spacing: Enhanced padding and margin settings to provide a consistent look and feel across different components, ensuring visual harmony and readability.
-Improved Flexbox Utilization: Updated the card container to leverage flexbox properties for better alignment and wrapping behavior, making the layout more robust against varying content lengths.
Please check the boxes that apply
[x] Bugfix (non-breaking change that fixes an issue)
[] New feature (non-breaking change that adds functionality)
[] Breaking change (fix or feature that would cause existing functionality to not work as expected)
Issue: Content Overflow in Responsive Layout
Closes: #233
This pull request addresses the content overflow issues within the responsive layout of the waste management section. It ensures that all elements are displayed correctly across various screen sizes without any misalignment or overflow, enhancing the user experience and maintaining design integrity.
-Fixed Card Overflow: Adjusted CSS properties to ensure that the waste classification cards do not overflow their container on smaller screens.
-Responsive Design: Implemented media queries to ensure the layout adjusts fluidly between different device sizes, improving accessibility on mobile devices.
-Consistent Spacing: Enhanced padding and margin settings to provide a consistent look and feel across different components, ensuring visual harmony and readability.
-Improved Flexbox Utilization: Updated the card container to leverage flexbox properties for better alignment and wrapping behavior, making the layout more robust against varying content lengths.
Please check the boxes that apply
Checklist
Please check the boxes that apply
https://github.com/user-attachments/assets/0475b9d1-5db9-4961-9fa8-6019327df437
Please assign this issue to me as I would like to work on fixing it. also add the label GSSoC 2024 Extd relaevant and lvl.