Title: Feature Request: Improve Website Responsiveness

[VanshChitransh]

Feature Request: Improve Website Responsiveness

Description:

The website should be responsive across various devices and screen sizes. Currently, some UI components may not scale or adjust properly when viewed on smaller screens (such as mobile devices) or larger displays.

Goals:

• Ensure that all elements, including text, images, and buttons, adjust properly on different screen sizes (mobile, tablet, desktop).
• Ensure the layout does not break or become unreadable when viewed on smaller or larger screens.
• Optimize font sizes, margins, and padding for better readability on different devices.
• Improve user experience by making the website fully usable on touch devices like smartphones and tablets.

Suggested Solution:

• Use CSS media queries to create breakpoints for different screen sizes (e.g., mobile-first approach).
• Implement flexible layouts with responsive units (e.g., em, rem, vw, vh) instead of fixed units.
• Test responsiveness on devices with various screen sizes using tools like Chrome DevTools or responsive design mode in browsers.

ScreenShot:

Additional Notes:

• The design could include features like a collapsible navigation menu for mobile screens, as well as fluid grids or flexbox for better content distribution on various devices.
• Testing across multiple devices and screen orientations is important to ensure the best possible user experience.

[VanshChitransh]

@nfoert Please assign me the issue, i want to work on this.

[nfoert]

Hello there @VanshChitransh, the screenshots you included are all intended layouts on mobile, this work was already done in #4. There are a few interfaces with bugs (namely #47). If there's any specific interfaces that need improved or have bugs, they should be given individual issue reports.