fix: add padding to hero CTA buttons on mobile#362
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b2bbc49127
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div className="hero-right"> | ||
| <Tagline /> | ||
| <div className="flex items-center gap-4 mt-3 landing-ctas"> | ||
| <div className="flex items-center gap-3 sm:gap-4 mt-3 px-4 sm:px-0 landing-ctas"> |
There was a problem hiding this comment.
LandingPage.tsx treats <=767px as the mobile hero layout (@media (max-width: 767px) and @media (min-width: 768px) in the same file), but this new sm: class drops the CTA padding at Tailwind’s 640px breakpoint. On 640–767px screens—such as small tablets and foldables in portrait—the hero is still stacked like mobile while the CTA row has already switched back to the desktop spacing, so the buttons sit flush to the edges again. Matching this breakpoint to the existing 768px mobile/tablet split would make the fix apply consistently.
Useful? React with 👍 / 👎.
1 participant
Adds responsive padding so the hero CTA buttons don't sit edge-to-edge on mobile.
px-4 sm:px-0for side breathing roompx-3 sm:px-5gap-3 sm:gap-4