unstructuredstudio
Improve mobile responsiveness on ZubHub
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:
- Go to 'Zubhub website'
- Right Click on ' any space and click on inspect to use the developer tool'
- Scroll down to 'toggle device toolbar to change device'
- 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.
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
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
@ladyami Thanks for making these suggestions! This can become a project of its own and be promoted via the next round of Outreachy.
