🐛 [Bug]: Hero Section Content Overflows on Medium/Small Screens

[nishtha-agarwal-211]

Describe the Bug

The hero section content is overflowing and getting cut off on medium/smaller screen widths. The heading and supporting text extend outside the visible container, making the layout look broken and reducing readability.

Steps to Reproduce

1. Open the homepage.
2. Open browser DevTools and switch to responsive mode.
3. Resize the screen width to around tablet/smaller laptop dimensions.
4. Observe the hero section content.

Expected Behavior

The hero section content should remain fully visible and properly aligned across all screen sizes without overflow or clipping.

Actual Behavior

The heading and text overflow outside the container and are partially hidden on smaller widths.

Possible Cause

• Large font sizes without responsive scaling
• Fixed width/max-width issues
• Missing responsive breakpoints or overflow handling in .hero-content

Suggested Fix

• Add responsive font scaling using media queries or clamp()
• Ensure proper max-width and padding adjustments
• Add overflow handling and improve flex responsiveness for smaller screens

Screenshots

[github-actions]

⚠️ Important Contribution Guideline

Please do not open a Pull Request without being assigned to this issue first.

Please do not open a Pull Request without being assigned to this issue first.

How to proceed:

1. Comment on this issue to express interest
2. Wait for maintainers to assign you to the issue
3. Once assigned, you can start working on the PR
4. Include the assignment in your PR checklist

Thank you for helping us maintain a smooth workflow! 🙏

[steam-bell-92]

@nishtha-agarwal-211 need to wait for this. Current entore hero section seems to be vanished

[bhavyapandiya29]

Hello! I am interested in solving this bug. I will fix the overflow and alignment issues by adding proper max-width constraints and responsive breakpoints. Could you please assign it to me under GSSoC 2026?