Issue: Content Overflow in Responsive Layout #233

[sahhoArjun097]

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

• 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)
• [] Documentation update (Documentation content changed)
• Other (please describe):

Checklist

Please check the boxes that apply

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• My changes do not break the current system and pass all existing test cases
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

bandicam.2024-10-09.21-20-38-891.mp4

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.