[UI/UX] Mobile Navbar Buttons Overlapping and Breaking Hero Section Layout

[Adi-Marathe]

🖼️ Current UI/UX Behavior

On smaller screen devices (mobile view), the navbar buttons (Sign In and Get Started) appear compressed and misaligned, causing the navigation layout to look cluttered.

Additionally, the hero section content becomes visually unbalanced due to improper spacing and responsiveness issues.

Observed Issues:

• Navbar items are too close together on mobile devices.
• Buttons wrap awkwardly and reduce readability.
• Hero section alignment and spacing feel inconsistent.
• Overall mobile responsiveness needs improvement.

✨ Suggested Improvement

Improve the mobile responsiveness of the navbar and hero section by:

• Using better flex wrapping and spacing for navbar items.
• Adjusting button padding, font sizes, and widths for smaller screens.
• Improving alignment and responsiveness of hero section text/buttons.
• Ensuring proper spacing and layout consistency across all mobile breakpoints.

📱 Steps to Reproduce

1. Open the website in mobile view (around 360px width).
2. Observe the navbar section.
3. Notice the button overlap/compression and spacing issues.

✅ Expected Behavior

• Navbar should remain clean and properly spaced on mobile devices.
• Buttons should align neatly without overlapping.
• Hero section should maintain balanced spacing and readability across screen sizes.

📸 Screenshot

🙋 Contribution Note

I would like to work on this issue under GSSoC'26 and SSoC'26.

[Adi-Marathe]

Hi @Ashmita1206 , I would like to work this issue.. Kindly assign this to me.... under SSoC'26 and GSSoC'26 Thank you!!

[abinaya-manokaran]

Hi @Ashmita1206 👋

I analyzed the issue and found that the navbar buttons are likely breaking on smaller screens because of insufficient flex wrapping, fixed spacing, and button sizing constraints.

Suggested Fix:

• Use responsive flex-wrap for navbar items
• Add proper gap spacing between buttons
• Reduce button padding/font size on smaller breakpoints
• Use responsive width handling (w-full sm:w-auto)
• Improve hero section spacing/alignment using responsive Tailwind classes
• Ensure proper stacking and centering on devices around 320px–480px width

I can work on improving the mobile responsiveness and overall UI consistency for the navbar and hero section.

Please assign this issue to me under SSoC'26.
Thank you!

[aditya-sharma-devs]

Hi @Ashmita1206,

I would like to work on this issue under SSoC 2026.

Proposed Solution:

• Improve mobile responsiveness of the navbar using proper flexbox alignment and mobile breakpoints.
• Prevent button compression/overlap on smaller screens.
• Optimize spacing, padding, and typography for devices around 320px–480px width.
• Improve hero section responsiveness by adjusting heading sizes and button layouts.
• Ensure a consistent layout across common mobile screen sizes.

Expected Result:

• Clean and properly spaced navbar on mobile devices.
• No overlapping or compressed buttons.
• Better readability and visual balance in the hero section.
• Improved overall mobile user experience.

Please assign this issue to me. Thank you!

[1CodeBreaker705]

Hi @Ashmita1206 , I would like to work this issue.. Kindly assign this to me under GSSoC'26 Thank you!!

[rajpatel-09]

Hi @Ashmita1206 ,

I'd like to work on this issue under SSoC26.

I have reviewed the issue and would like to fix the mobile navbar responsiveness and layout problems affecting the hero section.

Could you please assign this issue to me?

Thank you.

[aditya-sharma-devs]

Hi @Ashmita1206 , this issue still needs attention, I would like to work on it under SSOC'26, Kindly assign it to me.
thank you.