Design comparison
Solution retrospective
Any tips or feedback regarding best practices is greatly appreciated :)
Community feedback
- @robicode-05Posted over 1 year ago
Hello !
In addition to what @Hassiai said, you do not need to redefine font-family for all the text.
font-family in css in one of the few property which is apply on every descendent automatically. So the easiest way is to define it inside html selector.
html { font-family: "Outfit", sans-serif; }
Have fun for your next challenge ;)
Marked as helpful0 - @HassiaiPosted over 1 year ago
To center .container on the page using flexbox or grid instead of position: absolute, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
USING FLEXBOX: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
USING GRID: body{ min-height: 100vh; display: grid; place-items: center; }
Give the img a max-width of 100% instead of a fixed value. Give h1 and p the same font-size of 15px which is 0.9375rem.
Hope am helpful.
Well done for completing this challenge. 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