Design comparison
Solution retrospective
. The difficult part of the project was that the grid-areas was not working for some reason, tho i have a theory that it is about the child thingy stuff.
. I am unsure of the font and the color hehe
. Would it be optimal to keep nesting div? *especially like 5 divs
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hello altacis, how are you? Welcome to the community of front-end mentors! I truly loved your project's outcome, however I have some advice that I hope you'll find useful:
To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!body { margin: 0; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 100vh; }
I noticed that in higher resolutions the content is stretching a lot and this is harming the design of the project, to fix this in a simple way we can use a
max-width
..container { height: auto; max-width: 1440px; }
The remainder is excellent.
I hope it's useful. 👍
Marked as helpful1@altacis1Posted almost 2 years ago@AdrianoEscarabote Hi, thank you for the body { } suggestions. It indeed works on screen size above 1440px compared from what I did.
1 - @Deevyn9Posted almost 2 years ago
Hi Altacis, congrats on completing this project, it looks wonderful. However, here as some key takeaways you can work on to make it better:
Firstly about the color, for the background you're to use
hsl(210, 46%, 95%)
instead ofhsl(0, 0%, 81%)
Also, the container isn't centralized on vertically, to make it centered, you should add
display: grid;
andplace-items: center;
to the body tag.I hope this comment helps you achieve what you want.
Happy Coding! 🎉
Marked as helpful1
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