@4LastBreath
Posted
Hey, looks like there's some issues in your css. You have no width on your body and no height on your class container. If you talk about using flexbox in your body to center your card you can do it like this.
body {
background-color: var(--light-gray);
font-family: var(--font1);
min-height: 100vh;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.card {
padding: 18px;
background-color: white;
border-radius: 16px;
box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.199);
width: 350px;
}
and remove all style of your class container. (you can also delete it in the html).
Marked as helpful
@ivan-josef
Posted
@4LastBreath
So the container class is unnecessary? Since I can configure the body and to use flexbox I always need to determine the width and height in the class from outside?
thanks.
@4LastBreath
Posted
@ivan-josef
Yes the container class is unnecessary for this case and was also the reason your flexbox didn't work. The parent element needs space inside to center his childs elements with flex, you can use the console to help you find which element is causing you a problem. 🖖
Marked as helpful
