@correlucas
Posted
๐พHello Oluwatosin , congratulations for your new solution!
๐จโ๐ป Hereโs some tips to improve your solution code:
1.Remove the background-color: #dee5f1;
from the container and add it to body
to make it filling all the screen bg:
.cover {
max-width: 320px;
/* height: 100%; */
position: absolute;
/* background-color: #dee5f1; */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
You tried to align the component using margins
but this make this task really tricky and hard control all the content. My advice for you is to use flexbox
to create this alignment. First thing you've to do is to add min-height: 100vh
to make sure your body will be displaying minimum 100% of the view-port height (this will help the card be ever aligned vertically centered) and then add display: flex; align-items: center; justify-content: center;
to make the alignment:
body {
background-color: #dee5f1;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
โ๏ธ I hope this helps you and happy coding!
Marked as helpful
@Oluwatosin0
Posted
@correlucas Thank you so much