@correlucas
Posted
πΎHello @ammar886, Congratulations on completing this challenge!
Your component is okay but it's missing the vertical alignment. The best way to do it is by using flexbox
. First step is to add min-height: 100vh
to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment with display: flex
/ align-items: center;
/ justify-content: center;
REMOVE THESE MARGINS:
.container {
width: 300px;
height: 480px;
background-color: white;
border-radius: 5%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* margin: auto; */
/* margin-top: 55px; */
}
ALIGN WITH MIN-HEIGHT
AND FLEXBOX
:
body {
min-height: 100vh;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
}
βοΈ I hope this helps you and happy coding!
Marked as helpful
@ammar886
Posted
@correlucas Thanks for the detailed guideline. I'll surely keep this in mind. Another thing? Do I need to use the body as flex-container? In this solution, I had used the white background rectangle as my container.