Skip to content

fix: align hero social icons - #30

Merged
kamycoding merged 1 commit into
mainfrom
fix/hero-social-aligment
Aug 11, 2026
Merged

fix: align hero social icons#30
kamycoding merged 1 commit into
mainfrom
fix/hero-social-aligment

Conversation

@kamycoding

Copy link
Copy Markdown
Owner

No description provided.

Copilot AI lite review requested due to automatic review settings August 11, 2026 11:40
@netlify

netlify Bot commented Aug 11, 2026

Copy link
Copy Markdown

Deploy Preview for fanciful-cannoli-268c0c ready!

Name Link
🔨 Latest commit 150d0b6
🔍 Latest deploy log https://app.netlify.com/projects/fanciful-cannoli-268c0c/deploys/6a7b0a3e4452050008b3e954
😎 Deploy Preview https://deploy-preview-30--fanciful-cannoli-268c0c.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@kamycoding
kamycoding merged commit c057ec1 into main Aug 11, 2026
5 checks passed
@kamycoding
kamycoding deleted the fix/hero-social-aligment branch August 11, 2026 11:41

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

Aligns the Hero section’s desktop social icon column by switching to fixed desktop sizing/spacing and introducing a desktop content-width variable for positioning.

Changes:

  • Introduces --hero-desktop-content-width for desktop layout calculations.
  • Adjusts .hero__socials desktop positioning using the new content width variable.
  • Replaces responsive clamp(...) sizing (gap/icon size) with fixed pixel values on desktop.
Suppressed comments (1)

src/app/pages/home/sections/hero/hero.css:249

  • The left calculation hard-codes 72px, but the stage padding-inline is responsive (clamp(32px, 5vw, 72px)). On narrower desktop widths (e.g. ~1024px), the padding will resolve below 72px, so the socials will no longer align with the stage content. Use the same padding variable in the positioning calculation to keep the socials aligned across the full desktop range.
    left: max(72px, calc((100% - var(--hero-desktop-content-width)) / 2 + 72px));

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines 183 to 186
.hero__stage {
--hero-desktop-content-width: 1440px;
padding: 80px clamp(32px, 5vw, 72px) 48px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants