Improve Mobile Responsiveness: Fix X-axis Scroll & Incomplete Navbar/Footer Rendering #139
Closed as duplicate
Description
Improve Mobile Responsiveness: Fix X-axis Scroll & Incomplete Navbar/Footer Rendering
📱 Overview:
While testing LearnHub on multiple mobile devices, I noticed layout issues that affect the mobile user experience and UI consistency.
🐞 Issues Observed:
1. X-axis Horizontal Scrolling
- Observed on: Samsung Galaxy Z Fold S
- Problem: Users can scroll horizontally, indicating layout overflow beyond the screen width.
- Possible Cause: Containers or elements exceeding 100vw due to improper padding/margin.
2. Navbar and Footer Not Extending Fully
- Observed on:
- iPhone 14 Pro Max
- Samsung Galaxy X20 Ultra
- Samsung A35
- Problem: Navbar and footer do not fully stretch across the screen width and appear cut off or misaligned on the right.
- Possible Cause: Width not set to 100%, or lack of appropriate container wrapping/flexbox settings.
🧩 Proposed Solution:
I would like to work on improving mobile responsiveness by:
- Eliminating horizontal scroll using proper width and
overflow-x: hiddenwhere needed. - Fixing layout paddings/margins that cause content to overflow.
- Ensuring the navbar and footer span the full width on all screen sizes.
- Testing responsiveness using CSS media queries across common device breakpoints.
📱 Devices Tested:
| Device | Issue |
|---|---|
| Samsung Galaxy Z Fold S | X-axis horizontal scrolling |
| iPhone 14 Pro Max | Navbar/Footer misalignment |
| Samsung Galaxy X20 Ultra | Navbar/Footer misalignment |
| Samsung A35 | Navbar/Footer misalignment |
📸 Video:
mobileissuepreview.mp4
🙋♂️ I’d Like to Work on This:
I would love to take full responsibility for this issue under GSSoC’25. Kindly assign it to me.
✅ Checklist:
- I’ve read the contributing guidelines.
- I’ve tested this issue across multiple devices.
- I’m a GSSoC’25 participant.
- I’ve starred the repository.