Design comparison
Solution retrospective
I'm just now starting to check responsiveness, so any feedback about that will be appreciated, if I could do anything better.
Also spent too much time trying to hide extra 6 pixels my green hover had over the picture, please let me know, if hidden property is the best solution
Thank you
Community feedback
- @VCaramesPosted about 2 years ago
Hey @MelloFrontEnd, adding to what was said above/below:
-
Regarding your question, sometimes the issue can be the browser itself. I have ran into situations where an issue would only appear on on browser and not on others. So I recommend checking your work on two or more different browsers.
-
The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
To align your icons and text, you want to dd the following to their container's:
.amount-container, .time-container { display: flex; align-items: center; gap: 10px; }
-
Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.
-
A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Happy Coding!
Marked as helpful0 -
- @correlucasPosted about 2 years ago
👾Hello @MelloFrontEnd, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
Fix the alignment of the whole content using
flex
andmin-height
to manage the vertical alignment and make everything centered.First of all putmin-height: 100vh
to thebody
to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.body { background: #0D192C; font-family: 'Outfit'; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
✌️ I hope this helps you and happy coding!
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