NFT preview card component using Flexbox and Responsive
Design comparison
Solution retrospective
I like to receive feedback from the CSS and especially the use of the flexbox
Community feedback
- @correlucasPosted over 2 years ago
πΎ Hello Alan, congratulations for your solution!
This a really well done solution, but there are some minor fixes to work here. I'll give you some tips:
1.Work in the container changing the all the
width
properties tomax-width
in order to allow you container become responsive and contract while scaling. Note that you don't need to se the img height if you define it asdisplay: block;
the image will consider 100% of the container.2.You did the hardest part that was add the overlay effect, its perfect, to improve it you can add
transition: all ease 0.5s.;
to create an smooth transition between the hover active / inactive.3.Add
flex-wrap: wrap;
inside the ethereum price section to allow the line break when the window scale until mobile version.Hope it helps you, happy coding bro.
Marked as helpful0@AlanLopReyPosted over 2 years ago@correlucas Thank you so much bro, I'll implement your advices, I appreciate so much your advice
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