Design comparison
Solution retrospective
Lots of thanks to everyone reviewing or checking my work and a big thumbs up for the community.
Community feedback
- @Gr3g0ry99Posted over 1 year ago
Hey buddy! So to center the box, if you remove all the margins you have set to the square class which will remove the scrollbar and add the following to the body class: min-height: 100vh; display: flex; justify-content: center; align-items: center;
This should center the box! Let me know if this helps :)
Marked as helpful1@sorin7345Posted over 1 year ago@Gr3g0ry99 Thanks a lot for the advice :) really helpfull
0 - @Cyber-ChicPosted over 1 year ago
Wonderful job completing your first challenge! 😊
In addition to the other feedback you've received for this challenge, I have a few more recommendations:
-
There are games you can play to learn how to center content. I suggest trying Flexbox Zombies, Froggy Flexbox and Grid Garden. All 3 of the games are free.
-
Change your background color. You used a slightly different color. To do this I would change your code from:
background-color: #c4e4e9;
to
background-color: hsl(218, 44%, 22%);
-
Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.
-
Add a <main> tag around the main content on your webpage. All web pages should include one <main> tag. This is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.
Example:
<main> <div class='container'> <h1>Main heading text</h1> <p>paragraph text</p> </div> </main>
I hope this is helpful! Great work & Happy Coding!
-Angie
Marked as helpful0 -
- @Durban86Posted over 1 year ago
Reading up on Flexbox will help you tons. Read this article and centering things will be a breeze. CSS Tricks: A Complete Guide to Flexbox
Not everyone is going to have the same screen size, so hard margins won't center it for everyone.
Also read up on padding and margin shorthand. It'll save you time instead of having to type out "margin-left, margin-right, margin-top" each time.
Well done, keep at it!
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