@hyrongennike
Posted
Hi @mshaynerush,
Congrats on completing the challenge Jus a few suggestion you can replace the rule on the body with following to center the card the page.
body {
background: var(--body-bg);
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
this will center the card in the middle of the page. But because you used position: absolute
you need to remove the following declarations.
.wrapper {
/* position: relative; */
/* top: 5em; */
/* bottom: 100px; */
background: var(--wht);
padding: 20px;
/* width: fit-content; */
/* height: fit-content; */
/* margin: auto; */
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
/* display: block; */
}
.attribution {
font-size: 11px;
text-align: center;
margin-top: 2rem;
/* position: absolute; */
/* top: 55em; */
/* left: 50%; */
/* transform: translateX(-50%); */
}
everything with /.../ remove it completely. Hope these are helpful, let me know if you have any other questions.
Marked as helpful