Poor Styling and Spacing on Small Screen Devices

[Pratik-Bavche]

Description

On small screen devices (such as mobile view), the UI layout does not appear properly styled. Elements lack sufficient margin, padding, and spacing, causing the content to look cramped and misaligned. Cards are too close to each other, padding inside components is inconsistent, and overall readability and visual balance are reduced on smaller screens.

Screenshots

Any additional information?

Improve responsive styling for small screen sizes by:

Adding appropriate margins and padding for mobile breakpoints

Adjusting card spacing and vertical gaps

Ensuring consistent alignment and readable spacing on small devices

Using responsive CSS (media queries or mobile-first styles) to enhance layout consistency

These changes will significantly improve usability and visual clarity on mobile devices.

What browser are you seeing the problem on?

Chrome

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)

[Pratik-Bavche]

I would like to work on this issue. Please assign this issue to me so I can investigate and fix it.

[Saip950]

Hello, I am a beginner contributor.
I would like to work on this issue. Please assign it to me.