Design comparison
Community feedback
- @IryDevPosted over 1 year ago
Hey, well done for completed this challenge 😁
I have some suggestions to help you to improve your solution :
- your card seem to not be correctly centered
- You can use the properties
display: flex;
,align-items: center;
,justify-content: center;
, in order to correctly center your card - You can remove the property
margin: 5rem auto;
CSS :
body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction:column; }
I also make a pull request on your Github repo so you can merge it if the changes suit you
I hope you'll find this helpful, and your solution is really good
0@rogerio-sousa-ribeiroPosted over 1 year ago@IryCode
Boa tarde, colega
Não entendi o por que de usar o flex-direction, poderia me explicar?
0@IryDevPosted over 1 year ago@rogerio-sousa-ribeiro if you don't use the property flex-direction your element will be arranged horizontally and the footer will be place at the right of your main content, by using flex-direction the footer will be placed at the bottom of the card. In fact the display flex is applied on the body so the element inside the body will be "flexible" in terms of the properties specifies. Here, the element are the main and the footer. That's why i would use the flex direction column
Here's a more detailled explanation on the flex-direction property :
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