Design comparison
Solution retrospective
If anybody could provide assistance on better sizing for containers that'd be greatly appreciated
Community feedback
- @0xabdulkhaliqPosted 11 months ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML :
- You have used
div
instead ofbutton
like semantic element. So please do consider to update your button like this,
<button class="continue-button-container "> Continue </button>
- And for now you haven't declared hover state gradient background has not yet.
- Just add the following css rules
continue-button-container :hover { background: linear-gradient(#6542FE, #342CE2); }
- If you have any questions or need further clarification, you can always check out
my submission
and/or feel free to reach out to me.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
0 - @danielmrz-devPosted 11 months ago
Hello @huntdamann!
Your project looks good!
About your question:
- If anybody could provide assistance on better sizing for containers that'd be greatly appreciated
-
For
width
: Don't use percentage or viewport width/height based values. This can cause bugs and make your card sometimes overgrow on bigger screens or not grow enough on smaller ones. Usemax-width
with fixed values, like pixels. -
For
height
: Just add the content and let it adapt its height to fit the content inside of it. Most times, it'll be just the size it needs to be.
I hope it helps!
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord