Skip to content

fix(hero):improve mobile spacing for hero section #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aditi25srivastava wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(hero):improve mobile spacing for hero section #300

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions app/components/Hero/Hero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,4 +148,23 @@
.hero-buttons {
margin: 0 auto;
}
}
/* moblie spacing improvements for hero section */
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Typo in comment: "moblie" → "mobile".

-/* moblie spacing improvements for hero section */
+/* mobile spacing improvements for hero section */
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* moblie spacing improvements for hero section */
/* mobile spacing improvements for hero section */
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/components/Hero/Hero.css` at line 152, Fix the typo in the comment string
"moblie spacing improvements for hero section" by updating it to "mobile spacing
improvements for hero section" in Hero.css so the inline comment reads
correctly; search for the exact comment text to locate and replace it.

@media (max-width: 768px) {
.hero-content {
padding: 1.5rem 1rem;
}

.hero-content h1 {
margin-bottom: 1rem;
}

.hero-content p {
margin-bottom: 1rem;
}

.hero-buttons {
margin-top: 1rem;
gap:0.75rem;
}
Comment on lines +152 to +169
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Feb 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Duplicate @media block silently overrides padding-left: 0, introducing an unintended layout change.

Adding a second @media (max-width: 768px) block (rather than extending the existing one at lines 138–151) causes CSS cascade to silently kill the first block's padding-left: 0 rule. The new padding: 1.5rem 1rem shorthand sets all four sides, so mobile padding-left becomes 1rem instead of 0, which directly contradicts the PR description ("No design or layout changes were made"). The margin: 0 auto centering on .hero-buttons is also partially obscured, as the separate margin-top: 1rem in the second block makes intent harder to reason about.

All new declarations should be merged into the existing @media (max-width: 768px) block:

♻️ Proposed fix — merge into the existing media query 
 `@media` (max-width: 768px) {
   .hero-container {
     flex-direction: column;
     text-align: center;
   }
 
   .hero-content {
-    padding-left: 0;
+    padding: 1.5rem 1rem;
   }
 
+  .hero-content h1 {
+    margin-bottom: 1rem;
+  }
+
+  .hero-content p {
+    margin-bottom: 1rem;
+  }
+
   .hero-buttons {
-    margin: 0 auto;
+    margin: 1rem auto 0;
+    gap: 0.75rem;
   }
 }
-/* moblie spacing improvements for hero section */
-@media (max-width: 768px) {
-  .hero-content {
-    padding: 1.5rem 1rem;
-  }
-
-  .hero-content h1 {
-    margin-bottom: 1rem;
-  }
-
-  .hero-content p {
-    margin-bottom: 1rem;
-  }
-
-  .hero-buttons {
-    margin-top: 1rem;
-    gap: 0.75rem;
-  }
-}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@app/components/Hero/Hero.css` around lines 152 - 169, There are two separate
`@media` (max-width: 768px) blocks causing the new shorthand padding to override
the earlier mobile-specific padding-left: 0; remove the duplicate `@media` block
and merge its declarations into the existing `@media` (max-width: 768px) block
(update the block that contains .hero-content, .hero-content h1, .hero-content
p, and .hero-buttons), replacing the blanket padding: 1.5rem 1rem shorthand with
explicit sides (e.g., keep padding-left: 0 and set padding-top/right/bottom as
needed) and consolidate .hero-buttons margin and gap there so the mobile layout
intent is preserved.

}