Improve mobile responsiveness on ZubHub

[ladyami]

Describe the bug
The website is not responsive on smaller devices, such as smartphones and tablets. This means that the website layout does not adjust for different screen sizes, and users may have difficulty viewing and interacting with the website on these devices.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Zubhub website'
2. Right Click on ' any space and click on inspect to use the developer tool'
3. Scroll down to 'toggle device toolbar to change device'
4. See error

Expected behavior
The website layout should adjust for the smaller screen size, and all elements of the website should be easily visible and clickable.

Actual results

The website layout does not adjust for the smaller screen size, and some elements of the website may be difficult to see or click on.

Screenshots

The header content is not responsive, there should only be the logo and the hamburger menu other content should be hidden

There shouldn't be a small white space on the right-hand side, the background color needs to cover the entire body background.

The project card content is cramped and requires more space for proper layout.

The video timelines overlap, adding a margin will separate each card.

[ladyami]

I came up with a solution to make the navbar responsive.

current state of the design

The solution


I removed the profile icon, notification icon, search icon and language icon





I moved the search, language, and notification icons to the sidebar and removed the profile icon as it serves the same purpose as my profile in the sidebar.



When the search icon is clicked, this screen will appear.

When the change language is clicked, this screen will appear.

https://www.figma.com/file/M3Cl5VO1enP6a3jgvZD4TI/Zubhub-header?type=design&node-id=4%3A179&mode=design&t=hjwTUlSM57fEdONN-1

[ladyami]

I'm currently in the process of finding solutions for the remaining issues.

and not I didn't add the background gradient because the main focus is the navbar and sidebar

[srish]

@ladyami Thanks for making these suggestions! This can become a project of its own and be promoted via the next round of Outreachy.

[Marhiposa]

@srish Does that mean we shouldn't work on this issue?

[ladyami]

@srish I am also a developer I can implement it should I go and do that?

[coderatomy]

Nice work @ladyami

[ladyami]

Thank you @coderatomy

[CodebyCc]

Hello please can you assign this issue to me please?