Design comparison
Solution retrospective
feedback is more than welcome.
Community feedback
- @Remy349Posted 11 months ago
Hi @aazs-edu, congratulations for completing the challenge, the final result is amazing. I would just like to give you a couple of tips to improve your skills.
-
In the body, instead of using height: 100vh; it is preferable to use min-height: 100vh; to center elements.
-
With height you are giving a definitive height to the element, if the content needs more space it will overflow.
-
With min-height you are giving an element a minimum height, if you specify a lower height, the height that the element will have will be the value you assigned to min-height, min-height is not applied when the height is greater than min-height.
-
-
In mobile responsive design there comes a point where the design wants to break, this is because of the width: 340px; you use in your <div class="container"> tag, instead you can use a max-width: 340px; and in the <section> tag add a margin: 0 1rem; and remove the margin: 0 auto; you have in your <div class="container"> tag. This way you will have a better responsive design for mobiles.
CONGRATULATIONS for completing the challenge, keep it up :)
Marked as helpful1 -
- @danielmrz-devPosted 11 months ago
Hello @aazs-edu!
Your project looks great!
I have just one minor suggestion for you to improve it:
- Since the card is the main (and only) content on the page, you can replace your tag
section
with the tagmain
. We do that for accessibility and SEO purposes, it makes your HTML more semantic.
I hope it helps!
Other than that, you did an excelent job!
Marked as helpful1 - Since the card is the main (and only) content on the page, you can replace your tag
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