Design comparison
SolutionDesign
Community feedback
- @MahmoodHashemPosted 4 months ago
Hello there
Congratulations on completing the challenge!
Your solution is truly impressive.
I have a couple of ideas to make it even stronger:
- Firstly, consider centering the card. You can achieve this by applying the following CSS to the body (excluding margins from the card for correct functionality):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
- Secondly, there is no need to wrap the card inside three containers. One container is sufficient to make your code maintainable and readable. For this single card container, set the max-width, border, background, etc. This will eliminate the need for media queries.
After refactoring:
HTML
<div class="card"> <img src="./images/illustration-article.svg" alt="illustration" class="first-image" /> ... ... </div>
CSS
body { display: flex; justify-content: center; align-items: center; height: 100vh; } .card { border: 1px solid #000; padding: 20px 20px; background: #fff !important; max-width: 400px; ... }
Hope this helps! IF DOES HIT THAT LIKE
Keep up the great work!
Marked as helpful1@Abioye965Posted 4 months ago@MahmoodHashem yoo i just implemented your style. it worked so well
1@MahmoodHashemPosted 4 months ago@Abioye965 You've done really well, proud of you for embracing a growth mindset.
0 - @LucasJCFreirePosted 4 months ago
Your design was great. Vibrant colors better than the original. :)
Marked as helpful1
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