Improve CSS of StyledCard in developers page #8132
Conversation
dhirajgagrai
requested review from
samajammin,
wackerow,
corwintines,
pettinarip,
minimalsm and
jmcook1186
as code owners
github-actions
bot
added
the
needs review 👀
✅ ethereum-org-website-dev deploy preview ready
|
|
This PR also fixes #8062. |
There was a problem hiding this comment.
Thanks for the PR @dhirajgagrai. Lets add these changes on the Card component.
src/pages/developers/index.tsx
Outdated
| justify-content: space-between; | ||
| gap: 20px; |
There was a problem hiding this comment.
Lets add these styles to the Card component (src/components/Card.tsx) itself instead of doing it here. If not you will fix the problem only for this page.
src/pages/developers/index.tsx
Outdated
| justify-content: space-between; | ||
| gap: 20px; |
There was a problem hiding this comment.
| justify-content: space-between; | |
| gap: 20px; | |
| justify-content: space-between; | |
| gap: 1rem; |
| "page-developers-learn": "Ethereum development", | ||
| "page-developers-learn-desc": "Read up on core concepts and the Ethereum stack with our docs.", |
There was a problem hiding this comment.
I would suggest reverting these changes since it will not fix the root problem. The font size can vary between browsers and devices. There is no guarantee that you will always have one line.
There was a problem hiding this comment.
Yeah. Makes sense.
|
Congrats, your important contribution to this open-source project has earned you a GitPOAP! GitPOAP: 2022 Ethereum.org Contributor: Head to gitpoap.io & connect your GitHub account to mint! Learn more about GitPOAPs here. |
|
@dhirajgagrai be sure to join the discord if you are interested in contributing further to the project or have any questions for the team. And we've just released our 2022 POAPs so remember to claim yours also 🥳! |
|
@all-contributors please add @dhirajgagrai for code |
|
I've put up a pull request to add @dhirajgagrai! 🎉 |
Improved CSS of StyledCard to have a consistent layout. [Fixes #8062 ]
Description
Added justify-content property to align the buttons to the bottom of the div.
Also added the gap property to have a bit of separation between buttons and text.
Modified the title of the first card to 'Ethereum development'. This is to accommodate it into a single line to match the rest of the cards. From my judgement, it carries the same meaning as 'Learn Ethereum development' in this page's context.
Attaching the pictures of the original (first one) and my changes below.