Design comparison
Solution retrospective
Any advice on how to make this better would be greatly appreciated.
Community feedback
- @correlucasPosted about 2 years ago
๐พHello @AtulKumar0001, congratulations for your new solution!
๐ฏ Your solution its almost done and Iโve some tips to help you to improve it:
1.Add transitions to make smoother the interaction while the element gets hovered, you can use a value like
transition: all ease-in 0.5s
.2.Its ever better to use
relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.3.Use a CSS reset to avoid all the problems you can have with the default CSS setup, removing all margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
โ๏ธ I hope this helps you and happy coding!
Marked as helpful0 - @hyrongennikePosted about 2 years ago
Hi,
Congrats on completing the challenge a job well done, just one small replace the margin with padding on the card so that it goes all around.
.card { padding: 1.3rem; }
Once you feel all the requirement in the brief has been met you can add extra things to test yourself. see my NFT card solution below.
Hope the above helps
Marked as helpful0@AtulKumar0001Posted about 2 years ago@hyrongennike Hello, After reading your comment, I realised that I typed margin instead of padding in my style. CSS file ๐ Thank you for your reply. I wasn't going to check if you hadn't replied. And I would like to ask you a question about how you make your height and width exactly the same as the design preview.
0@hyrongennikePosted about 2 years ago@AtulKumar0001 Hi just by eyeballing and it's not necessary to set a fixed height because elements will most likely overflow on mobile just get you padding and margins as close to the design as possible the same goes for the width just guessing and testing to see what looks close.
Marked as helpful0 - @AtulKumar0001Posted about 2 years ago
@correlucas Hey, thanks for the suggestion. It was helpful. And I want to ask you: should I always use rem, or are there some particular situations where I should use rem, em, or %? If so, would you kindly offer some?
0@correlucasPosted about 2 years ago@AtulKumar0001 I ever usem rem, percentage I use to divide some elements under a specific container, for example a div with 1000px with two child divs, you can use width 30% and width 70% to divide the two child's with the percentage from the parent size
Marked as helpful0
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