@IryDev
Posted
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
@rogerio-sousa-ribeiro
Posted
@IryCode
Boa tarde, colega
Não entendi o por que de usar o flex-direction, poderia me explicar?
@IryDev
Posted
@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 :