Design comparison
Solution retrospective
This is my first grid project so I think I have a lot of room for improvement although the result so far has left me satisfied. Any suggestions are welcome.
Este es mi primer proyecto en grid asique creo que tengo bastante por mejorar aunque el resultado de momento me dejo satisfecho. Cualquier sugerencia es bien recibida.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using
margin
orpadding
.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states
- You already using
Flexbox
for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.
body { min-height: 100vh; }
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @KhawarmehfoozPosted over 1 year ago
Hi! 👋 Congratulations on completing the challenge!
I have some suggestions to improve the solution:
- Add the following CSS properties to the
body
to properly center themain-container
:
height:100vh; display:grid; place-items:center;
- Add the following CSS properties to the
main-container
to properly resize the container:
width: min(75%, 70rem);
Happy coding!
Marked as helpful0 - Add the following CSS properties to the
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