fixed mobile structure

[nitinmohan18]

Pull Request

Summary

This PR fixes several UI issues across the Home and Contact sections to prevent premature vertical stacking on desktop and tablet views. It also significantly compacts the "Send us a message" contact card on mobile devices so it doesn't artificially stretch the screen.

---

Related Issue

Closes #

---

Type of Change

• Feature
• Bug Fix
• Documentation
• Refactor
• Performance Improvement
• CI / Build
• Other

---

What Changed?

• Hero Grid Breakpoint: Lowered the main grid breakpoint in hero.tsx from lg (1024px) to md (768px), allowing the hero content and mockup to sit nicely side-by-side on tablets and small laptops.
• Contact Feature Row Fix: Changed .featuresHorizontal from flex-direction: column to row in ContactSection.module.css so the feature pills align horizontally as intended on desktop.
• Contact Section Breakpoint: Shifted the overall stack breakpoint for the Contact container from 1200px down to 992px to prevent standard desktop displays from rendering the mobile stacked view.
• Mobile Form Compaction: Drastically reduced spacing inside .contactCard on mobile by shrinking form gaps, field paddings, text sizes (specifically the heading), and removing the absolute positioning hack on the submit button.
• Dynamic Mobile Height: Added min-height: auto on mobile views to stop the Contact section from being cut off.

---

Screenshots (UI Changes Only)

(Add your before/after screenshots of the mobile contact form and the desktop hero section here)

---

Testing

• Tested the Hero layout down to 768px to ensure the side-by-side grid works and behaves responsively.
• Verified that the Contact section features don't break onto multiple lines forcefully on desktop.
• Shrunk browser width to <768px to ensure the mobile contact card looks tight, the heading doesn't awkwardly split into two lines, and the submit button sits neatly inside the card container.

---

Checklist

Before requesting a review, confirm the following:

• My branch is up to date with the latest main.
• My code follows the project's coding standards.
• I have formatted the modified files (npx prettier --write <file>).
• npm run format:check passes.
• npm run lint passes.
• npm run typecheck passes.
• npm run build passes.
• I have updated documentation if required.
• I have tested my changes locally.
• This Pull Request focuses on a single feature or fix.

---

Additional Notes

The absolute positioning (bottom: -20px) on the submit button inside the contact form was removed because it was causing overflow/cut-off issues on smaller devices.

Summary by CodeRabbit

• Style
  • Refined the contact section’s responsive layout and spacing for smaller screens.
  • Improved the arrangement of feature cards, form fields, and submit button on mobile.
  • Updated the hero section grid to better adapt across breakpoints with tighter spacing and an added medium-screen column setup.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyper-learning-tech	Ready	Preview, Comment	Jul 4, 2026 9:32am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 47ede0c7-74e3-47ad-9427-ecce691220e0

📥 Commits

Reviewing files that changed from the base of the PR and between ed0a6c5 and 7724852.

📒 Files selected for processing (2)

• components/contact/ContactSection.module.css
• features/landing/hero.tsx

---

📝 Walkthrough

Walkthrough

This PR adjusts CSS responsive styling in the contact section stylesheet (layout direction, breakpoint thresholds, typography, spacing, form field sizing, and submit button positioning) and updates Tailwind grid classes in the Hero component to reduce gap spacing and add a medium-breakpoint column configuration.

Changes

Contact Section Responsive Styling

Layer / File(s)	Summary
Feature layout and breakpoint adjustments components/contact/ContactSection.module.css	.featuresHorizontal changes from column/left-aligned to row/centered layout; the large breakpoint threshold moves from 1200px to 992px.
Mobile typography, spacing, and form restyle components/contact/ContactSection.module.css	At 768px, heading font-size, section padding/min-height, and container gap are reduced; feature layout, card padding/radius, icon sizes, and typography are tightened; form fields switch to single-column grid with smaller sizing; submit row changes from absolute to normal-flow positioning with a shorter submit button.

Hero Grid Responsive Update

Layer / File(s)	Summary
Hero grid class update features/landing/hero.tsx	Grid gap is reduced and a medium-breakpoint column configuration is added while the large-breakpoint columns remain unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• imuniqueshiv/HyperLearningTech#21: Both PRs modify features/landing/hero.tsx to change Hero layout/styling.

Suggested reviewers: imuniqueshiv, RamuuXfree

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is too vague and generic to clearly describe the layout changes in the Home and Contact sections.	Rename it to describe the main change, such as updating the Home and Contact section responsive layouts.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch ui-improvment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🎉 Congratulations @nitinmohan18!

Thank you for contributing to HyperLearningTech.

Your pull request has been successfully merged into main.

📦 Merge Summary

• PR: fixed mobile structure #46 - fixed mobile structure
• Status: ✅ Merged
• Repository: HyperLearningTech

🚀 Keep Contributing

• Follow the CONTRIBUTING.md guidelines.
• Keep each Pull Request focused on a single feature or fix.
• Run formatting, linting, type checking, and a production build before opening a PR.

Thank you for helping make HyperLearningTech better.

Happy Coding! 🚀