Skip to content

Stack landing page CTA buttons vertically on narrow mobile viewports#411

Merged
achalvs merged 1 commit intomainfrom
cursor/landing-page-button-stack-mobile-6b1d
Mar 21, 2026
Merged

Stack landing page CTA buttons vertically on narrow mobile viewports#411
achalvs merged 1 commit intomainfrom
cursor/landing-page-button-stack-mobile-6b1d

Conversation

@achalvs
Copy link
Contributor

@achalvs achalvs commented Mar 21, 2026

Summary

Changes the landing page hero CTA button stack from flex-row to flex-col on mobile viewports up to 560px wide. This prevents the two buttons ("Use with agents" and "Add payments to your API") from being cramped side-by-side on narrow screens.

Changes

  • Added a new @media (max-width: 560px) rule in src/components/LandingPage.tsx that:
    • Sets flex-direction: column on .landing-ctas so the buttons stack vertically
    • Sets align-items: stretch so buttons fill the available width
    • Centers the button text with text-align: center

Testing

  • pnpm check:types passes
  • pnpm build completes successfully
Open in Web Open in Cursor 

@vercel
Copy link

vercel bot commented Mar 21, 2026

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

Project Deployment Actions Updated (UTC)
mpp Ready Ready Preview, Comment Mar 21, 2026 0:14am

Request Review

@achalvs achalvs marked this pull request as ready for review March 21, 2026 12:14
@achalvs achalvs merged commit af464d6 into main Mar 21, 2026
8 checks passed
@achalvs achalvs deleted the cursor/landing-page-button-stack-mobile-6b1d branch March 21, 2026 12:17
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