Issue: Lack of Mobile View Support for User Interface

[vaibhavyadav-dev]

Description:

The current User interface does not provide support for mobile view.

Expected Behavior:

• The interface should be responsive and provide an optimal viewing experience on all devices, including mobile phones and tablets.
• Elements should scale and adjust their layout dynamically based on the screen size.
• The mobile version should follow best practices for mobile-friendly design, such as touch-friendly controls and clear, readable text.

Proposed Solution:

1. Review and Refactor CSS: Update the CSS stylesheets or implement a responsive design framework (like Bootstrap or Tailwind CSS) to ensure that the interface adapts to different screen sizes.
2. Use Media Queries: Add CSS media queries to detect screen sizes and adjust the layout accordingly for mobile devices.
3. Test on Multiple Devices: Test the layout on various mobile devices with different screen resolutions to ensure compatibility.
4. Mobile Navigation: Implement a mobile-friendly navigation menu, such as a hamburger menu, for better user experience.
5. Font and Image Scaling: Ensure that fonts and images scale correctly for smaller screens.

Priority:

High

[rairohit17]

@vaibhavyadav-dev i would like to work on this issue
I can implement Tailwind CSS to create a responsive design that adapts to different screen sizes.

[dharshini2022]

@vaibhavyadav-dev pls assign me this issue under hacktoberfest. I would like to work on this and bring the expected result

[vaibhavyadav-dev]

@vaibhavyadav-dev i would like to work on this issue I can implement Tailwind CSS to create a responsive design that adapts to different screen sizes.

ok @rairohit17 you can take it and make sure you've an idea about the webapp and to implement it fully.

[vaibhavyadav-dev]

@vaibhavyadav-dev pls assign me this issue under hacktoberfest. I would like to work on this and bring the expected result

Hey @dharshini2022 there's lot to contribute on this repo, look around, you'll definitely find bug to work upon.

[vaibhavyadav-dev]

@rairohit17 are you working on this issue ?

[rairohit17]

yes @vaibhavyadav-dev i am working on this issue
i have replaced the classes of index page with the tailwind classes
Screencast from 2024-10-21 00-38-43.webm

but i need to know do i have to add tailwind css to every page , as it will take a lot of time as all the class needed to be written again

[vaibhavyadav-dev]

@rairohit17 any update ?