Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I successfully used flexbox in this challenge.
What challenges did you encounter, and how did you overcome them?Challenges
- Getting link tags to be clickable. The thing was, I was adding padding to
tags hence mydid could not extend fully to accommodate the added paddings on my link tags. I had to removes all paddings from my link tags and instead add the paddings to the anchor tags after giving them a display of block.
Checkout these areas for me
- Responsiveness: Is there a better way I could have handled it.
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @zacc-anyona!
Your project looks great!
I have one suggestion for you to improve it even more:
- Using
paddingis not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:
š Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; /* it works with grid too */ justify-content: center; align-items: center; }Using Tailwind, that would be
<body class="min-h-screen flex/grid justify-center items-center">.I hope it helps!
Other than that, great job!
Marked as helpful0@zacc-anyonaPosted 9 months agoHello, @danielmrz-dev Thank you so much for the helpful review. I'd be sure to make changes to my code. I will also apply it to the future challenges I will be taking part in.
1 - Using
Please log in to post a comment
Log in with GitHub
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