Bug: Navbar and Filters Not Responsive on Mobile View

[zainabimran94]

Description

The website currently lacks full responsiveness when viewed on smaller screens or mobile devices. Key components such as the navbar (e.g., Home, Signup), "Create an Event," and "Filter" options are not displayed or functioning correctly in mobile view. This affects the usability of the platform for mobile users.

Proposed Solution

To resolve this issue, the following improvements can be made:

Make the Navbar Responsive

1. Consider using a responsive design framework like Bootstrap or creating custom CSS styles for the navbar.
2. Ensure that the navbar collapses into a mobile-friendly menu (such as a hamburger menu) and that dropdowns are accessible.

Improve Button Responsiveness

1. Redesign the "Create an Event" and "Filter" buttons to fit better on smaller screens. This could include increasing their size, spacing, and alignment for better usability.
2. Ensure touch targets are large enough to be tapped easily on mobile devices.

Test for Mobile Accessibility

1. Use browser developer tools or emulators to test how the design behaves on various screen sizes.
2. Add ARIA attributes and ensure all interactive elements are accessible and functional for screen readers and mobile users.

I am happy to work on fixing this issue if it's approved. Please let me know if I should go ahead and submit a pull request with the proposed changes.

Screenshots

No response

Browser 🥦

Google Chrome

Checklist ✅

• I checked and didn't find similar issue
• I have read the Contributing Guidelines
• I am participating in JWOC
• I am participating in IWOC
• I am willing to work on this issue (blank for no).

[github-actions]

Hello @zainabimran94, thank you for raising the issue.

Currently, the issue is marked as status: todo ⏳ This issue is yet to be seen by the maintainer of the project. so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at [email protected] if you think that this issue is of critical priority.

Give us a ⭐ to show some support
Happy OpenSource 🚀

[Balajisaketh]

HI. This can de done using Tailwind css or Bootstrap and i can make it happen
I am happy to work on the issue and fix neccesary requirements

[sohail9744]

Hi @zainabimran94 ,

The issue is fixed will move to the production soon, thanks

[Prriya-Karn]

@zainabimran94 please this issue assign to me i want to work on that

[sohail9744]

@Prriya-Karn the issue is already fixed check the pull request

[Prriya-Karn]

O sorry