Make hero-text on landing page bigger and becoming two rows#70
Make hero-text on landing page bigger and becoming two rows#70hyddeos wants to merge 1 commit intowithstudiocms:mainfrom
Conversation
Dokploy Preview Deployment
|
📝 WalkthroughWalkthroughThe hero headline in the index page has been restyled with increased font size (from 2.5em to 4.8em), text-wrap balance applied, and a responsive breakpoint added (3em at max-width 640px) for smaller screens. No functional changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
www/src/pages/index.astro (1)
661-664: Make the hero title fluid instead of width-only.Line 662 hard-codes a very large jump to
4.8em, and Lines 1221-1223 only reduce it below640px. Because the hero is still fixed at60vh, short-but-wide viewports can end up with a title/CTA stack taller than the hero, andtext-wrap: balancestill does not guarantee exactly two lines. A fluid size plus a line-length constraint would make this much more robust.Suggested CSS direction
.hero h1 { - font-size: 4.8em; + font-size: clamp(3rem, 6vw, 4.8rem); + max-inline-size: 12ch; + line-height: 1.05; text-wrap: balance; } - `@media` screen and (max-width: 640px) { - .hero h1 { - font-size: 3em; - } + `@media` screen and (max-width: 640px), screen and (max-height: 700px) { + .hero { + height: auto; + min-height: 60vh; + } .target-group-div, .target-group-div.enterprise { --reason-cols: 1; }Also applies to: 1220-1223
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@www/src/pages/index.astro` around lines 661 - 664, The hero title currently uses a fixed large font-size in .hero h1 (and the smaller breakpoint rules later) which can overflow the fixed hero height (60vh); change to a fluid responsive size using clamp() or a vw-based formula (e.g., clamp(min, preferred vw-based, max)) for .hero h1 so it scales with viewport width and has sensible min/max limits, and add a line-length constraint (max-width in ch or px, or a container width cap) to force 2-line wrapping consistency; update the corresponding smaller-breakpoint rules (the later .hero h1 overrides) to match the fluid approach so both desktop and mobile use the same clamp-based sizing and the hero content stays inside the 60vh container.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@www/src/pages/index.astro`:
- Around line 661-664: The hero title currently uses a fixed large font-size in
.hero h1 (and the smaller breakpoint rules later) which can overflow the fixed
hero height (60vh); change to a fluid responsive size using clamp() or a
vw-based formula (e.g., clamp(min, preferred vw-based, max)) for .hero h1 so it
scales with viewport width and has sensible min/max limits, and add a
line-length constraint (max-width in ch or px, or a container width cap) to
force 2-line wrapping consistency; update the corresponding smaller-breakpoint
rules (the later .hero h1 overrides) to match the fluid approach so both desktop
and mobile use the same clamp-based sizing and the hero content stays inside the
60vh container.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b1311cc1-91f9-4771-b06f-17b3713390be
📒 Files selected for processing (1)
www/src/pages/index.astro
|
Alright, appreciate the change! This is a little too big, for example, here's what it looks like on my 13" MacBook: If you could adjust this just a bit, that'd be great! |
@louisescher interesting, Chrome linux 1080p monitor 🤔 |
So, funny thing, the deploy preview is borked! I cloned it to see that change. |
3 participants
Description
Simple update to make the Header hero text be bigger and two lines instead of one. Also a font-size change on smaller screens so it keeps looking good.
Summary by CodeRabbit
Release Notes