Jeje 👾• 1,850
@AkoToSiJeromeEh
Posted
Hey ! great work out there i just notice that you are using margin on the .card in order to center the card component but it doesn't work as expected , i suggest that you use display : grid or display : flex in-order to center the card , thats all happy coding !!
by adding the display : grid and place-items : center you can achieve to center the card and any future work you create : )
body {
background-color: var(--light-grey);
font-family: Outfit, sans-serif;
font-kerning: none;
min-height: 100vh;
width: 100%;
display: grid;// add this or you can change display : flex;
place-items: center; // add this or you can change align-items : center with justify-content : center;
}
.card {
background-color: var(--white);
border-radius: 20px;
box-shadow: 0 25px 25px 0 var(--shadow);
margin: 212px auto;// you can remove this
padding: 16px 16px 40px;
text-align: center;
width: 320px;
}
Marked as helpful
1
ha308ing• 70
@ha308ing
Posted
@AkoToSiJeromeEh thank you so much for your feedback! noted and fixed! 🤝
for alignment i used design file as background with Pixel Glass and to align with that background I had to place the card not exactly at the center of the vertical axis.
0
