fix(public): keep the early-access CTA in the first viewport on Promptly/Drishti mobile heroes - #96
Conversation
…bile heroes The global h1 cap (9-10ch) balloons the sentence-length Promptly and Drishti hero headlines into a ~500px-tall narrow column on mobile, pushing the newly added Get early access CTA below the first viewport. Scope a product-hero modifier to those two heroes: wider wrap and a mobile-scale font for the h1, with tightened lead and action-row spacing, so the primary CTA lands in the first useful viewport.
…wports Drop the product-hero h1 floor to 2rem and tighten lead/action-row spacing: the early-access CTA now sits fully inside the first viewport at 375x667 (iPhone 8/SE2) as well as 375x812+ phones, with no layout change above 720px.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Included review availability: 1 review is currently available. Your included PR review attempts over the past 7 days set your current allowance at 4 reviews per hour. 📝 WalkthroughWalkthroughDrishti and Promptly hero sections now use the ChangesProduct hero mobile styling
Estimated code review effort: 1 (Trivial) | ~5 minutes Merge Risk: ⚪ Minimal · up to This localized change adjusts the mobile hero layout for Promptly and Drishti without reported merge-blocking issues; it is merge-ready after normal checks and review. Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
![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: af5cd08de9
ℹ️ 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".
| .product-hero h1 { | ||
| max-width: none; | ||
| font-size: clamp(2rem, 8vw, 3.4rem); |
There was a problem hiding this comment.
On landscape phones wider than 720 CSS pixels (for example, an 844×390 iPhone viewport), this override never applies. The 1024px breakpoint has already collapsed the hero to one column, but the product heading retains the global 10ch width and large font, so the lead and early-access CTA remain below the short first viewport. Please apply the product-specific compaction to landscape-phone dimensions as well, without necessarily changing the tablet layout.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
1 participant
Problem
The pre-launch "Get early access" CTA added in #32 was buried below the first
viewport on the Promptly and Drishti mobile heroes.
Root cause: the global h1 cap (
max-width: 9-10ch) with the large clamp fontballoons each sentence-length product headline into a ~500px-tall narrow
column on phones. The h1 alone ate ~60% of a 375x812 viewport, pushing the
action row (and the CTA) below the fold (measured CTA top: 1007px promptly,
1062px drishti at 375x812).
Change
Scope a
product-heromodifier to the two product heroes only:public/promptly/index.html,public/drishti/index.html: addproduct-heroclass to the hero section.public/styles.css(inside@media (max-width: 720px)only):clamp(2rem, 8vw, 3.4rem))Desktop/tablet (>=721px) layouts are untouched.
Verification
Rendered with headless Chromium and measured element positions:
The CTA is now fully inside the first viewport on all current phones
(375x667 through 430x932). At 320x568 (iPhone 5/SE1, ~2% of iOS) it remains
below the fold, but is now the best-positioned hero on the site at that width
(homepage 1075, support pages 837) — legacy viewport, documented as
deliberately left at a readable scale. No horizontal overflow at any width;
desktop/tablet positions unchanged.
npm run ci: 621 checks, 0 failures (incl. all 7 public-page suites).Summary by CodeRabbit