Submitted over 2 years ago
NFT Preview Card Component with min, max and clamp
@dheysonalves
Design comparison
SolutionDesign
Solution retrospective
It was a cool project.
I had difficulty setting min-height properly and avoiding vertical bar scroll showing up.
Do you have any best practices for me to improve skills ?
Community feedback
- @Bayoumi-devPosted over 2 years ago
Hey Dheyson, It looks good!...
The scrollbar appears on the page that because the body element has a default margin -->
margin: 8px;
--- Removemargin
body { //... margin: 0; }
- There is another issue when hovering over the image of the NFT preview card, The overlay should be transparent... use
background-color: hsla(178, 100%, 50%, 0.5);
instead ofbackground-color: var(--clr-primary-cyan);
.overlay { //... background-color: var(--clr-primary-cyan); }
I hope this is helpful to you... Keep coding👍
Marked as helpful1@dheysonalvesPosted over 2 years ago@Bayoumi-dev Thank you so much, Ahmed. Just fixed the points you mentioned, gonna remember for the next time about the margin. It was very helpful, see you.
0 - There is another issue when hovering over the image of the NFT preview card, The overlay should be transparent... use
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