Design comparison
Solution retrospective
I found positioning and the sizing the image quite difficult.
Community feedback
- @correlucasPosted over 2 years ago
👾Hello, congratulations for your solution!
I saw your solution and everything is really good and its also responsive, you've missed only one property to add in the body in order to align the container to the screen center, note that the container will align to the parent element, thats the body in this case, so you need to give its height to align, giving
min-heigh: 100vh
you make sure that the container aligns to the center height.See the code below:
body { min-height: 100vh; }
Hope it helps and happy coding!
0@KvngfaxPosted over 2 years ago@correlucas is the 100vh an example or it's a must
0@correlucasPosted over 2 years ago@Kvngfax a must because this will make the body display 100% of the viewport height, but this I'm saying if you're aligning using flexbox, there's people that align using
position: relative
andmargin: 0 auto
but I dont like these methods.0 - @AdarshRai0Posted over 2 years ago
Hello Abdulbasit Fasasi, congratulations for your solution!
If you want to improve your solution a bit I've two advice for your: Semantic tags
The direct children of the body must be wrapped in semantic tags to indicate users about the various purposes of different parts of a webpage.
For example,
<header> ...header of the webpage... </header> <main> ...main content of the webpage... </main> <footer> ...footer of the webpage... </footer> </body>``` Always add the "!DOCTYPE" HTML Language `<html lang="en">`
0
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