NFT Preview Card Challenge

Solution retrospective
Drop some tips in the comment section. I appreciate it and it will help me a lot. Thank you! :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hello @markskwid,
Your solution is almost done and I suggest you use Flexbox or CSS Grid to center your card in the middle of page:
Using Flexbox layout:
body{ display: flex; align-items: center; justify-center: center; min-height: 100vh; }
Using CSS Grid layout:
body{ display: grid; place-content: center; min-height: 100vh; }
I hope this helps you
Marked as helpful - P@jgreen721
Hey, congrats on finishing the challenge! Nice work on the overlay hover image.
My only suggestion is it looks like you're using
%
a fair amount for your height/widths but I believe?? without a specific size units on any parent containers, children elements will be a little lost on the context of what%
actually translates too...IOW, your NFT content card's width can skew a bit upon screen resizing. There's a lot of ways to skin that cat but an easy solution is just setting a hard-set min/max size values (iemin-width:400px
). Again, plenty of other approaches but, just a suggestion to fix the card from becoming too thin. Happy Coding!Marked as helpful - @AdrianoEscarabote
Hi Mark, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!
Example:
body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
The rest is great!
I hope it helps... 👍
Marked as helpful - To align some content in the center of the screen, always prefer to use
Join 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