Design comparison
Solution retrospective
Hey here's Goorezy! I await your criticism and advice to improve!
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Goorezy, congrats on finishing the challenge! you did almost get a pixel perfect solution, great job!
In your
card__nft--cotainer__hover
I would add acursor: pointer
to give the user clear intructions that is a clickable!, also increase the time of the effect of the animation to at least 0.5s, it gets smoother in my opinion.Also would recomment you to set your
body { font-size: 16px }
, because you are usinghtml { font-size: 62.5% }
, you can perfectly reset back your font-size in the body to 16px and you will still get rem values as 10px.Hope my feedback helps you, if you have any question, don't hesitate to ask!
Marked as helpful1@GoorezyESTPosted about 2 years ago@DavidMorgade I didn't knew that i can reset back the font-size and still get the rem at 10px, I will use that, thanks!
1@DavidMorgadePosted about 2 years ago@GoorezyEST Yeah, this is usually the snippet people use at the start of the CSS to work with rems as 10px without changing the body font-size to only 10px.
html { /* 1rem = 10px */ font-size: 62.5%; } body { font-size: 1.6rem; }
I love working with this method, 1rem = 10px is the easiest way to get sizes!
1@vanzasetiaPosted about 2 years ago@DavidMorgade and @GoorezyEST, I don't recommend changing the
html
or the:root
font size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. I suggest reading this article by Josh Comeau where he writes about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.1 - @correlucasPosted about 2 years ago
👾Hello Goorezy, congratulations for your new solution!
Your solution seems great, there's only one issue with the card responsiveness. All you need to make the container responsive is to replace
width: 30rem;
withmax-width: 30rem;
after change that you'll see the difference, the container will start to contract..card { background-color: hsl(216deg, 50%, 16%); display: flex; flex-direction: column; max-width: 30rem; border-radius: 1rem; padding: 2rem; box-shadow: 2rem 2rem 6rem rgb(0 0 0 / 50%); }
👋 I hope this helps you and happy coding!
1 - @vanzasetiaPosted about 2 years ago
Hello, Goorezy! 👋
Congratulations on finishing this challenge! 🎉
It's good that you are using
min-height
instead ofheight
on thebody
element. This way, on mobile landscape view, the users can still scroll to see the full card content. But, I notice that the card is touching the top and the bottom of the page. So, I would recommend giving somepadding
to prevent the card from touching the edges of the page.One more suggestion is to not hyphenate the alternative text (like code). It should be written as the normal text. The alternative text of the image would be pronounced by the screenreaders to help the users understand about the image.
That's it! I hope this helps! 🙂
1
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