fix: resolve the text overflow hidden on title#913
fix: resolve the text overflow hidden on title#913Sreejesh06 wants to merge 3 commits intoasyncapi:masterfrom
Conversation
Sreejesh06
requested review from
AceTheCreator,
Mayaleeeee,
ashmit-coder and
thulieblack
as code owners
✅ Deploy Preview for peaceful-ramanujan-288045 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Sreejesh06
changed the title
|
@AceTheCreator please take a look at this PR when you get a chance. Thanks! |
| > | ||
| <Heading | ||
| className="leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient" | ||
| className="leading-normal sm:leading-38px tracking-[-3px] sm:tracking-[-0.02em] font-extrabold text-gradient px-2 pb-2" |
There was a problem hiding this comment.
The solution in this PR does solve the issue, but it feels like a workaround than addressing the root cause. Could you please look into why the cutoff is happening in the first place?
There was a problem hiding this comment.
The solution in this PR does solve the issue, but it feels like a workaround than addressing the root cause. Could you please look into why the cutoff is happening in the first place?
I think the cutoff might be happening because of how gradient text works with background-clip: text. Some characters (like the “6”) seem to extend a bit beyond the element’s box, so when things are tightly sized it ends up getting clipped.
2 participants
Fix heading crop on large screens
Resolves #911
The main title on the homepage was getting slightly cropped on large screens.
Change
Added padding to the landing page heading:
px-2pb-2This ensures the heading has enough space and no longer gets cut off.
Testing
Screenshots
Before
After
