Design comparison
Solution retrospective
pls i hope i tried on this one if there is any suggestion or correction pls feel free to comment
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Olusola, congratulations for your new solution!
Your solution structure is really good done but you miss some design elements as the fonts. When you download the project files there’s a file called
style-guide.md
where you can find information such ashsl color codes
and thefont-size
for the headings.Here's the correct import for the font thats missing, add this to the CSS
@import url(https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;600&display=swap);
👋 I hope this helps you and happy coding!
Marked as helpful0 - @DavidMorgadePosted about 2 years ago
Hello Olusola, congrats on finishing the challenge!
Just as a little suggestion, you should try to get your component centered on the screen with flexbox, because with margin you can only center it horizontally and not vertically, this is a easy task if you set the
min-height
of your body to 100vh and then using flexbox, try using something like this:body { line-height: 1.7; font-size: 13px; background-color: hsl(210, 46%, 95%); display: flex; justify-content: center; align-items: center; min-height: 100vh; }
I also would recommend you to not set a base font-size on the body / line-height, is better to just set those in the concrete elements you want to style.
Hope my feedback helps you!
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