nicodes• 240
@nicodes-dev
Posted
Hi, I feel like you may have rushed your solution and did not test it before submitting because the page only looks okay on desktop screen width because you use translate to center your container but use a negative value. top: -50%;
There are also styles in your container that does not work. I assume you want to use flex because you added flex-direction.
.container { //forgot to add display: flex;
background-color: #fff;
width: 450px;
align-items: center;
flex-direction: column;
text-align: center;
justify-content: center;
border-radius: 8px;
box-shadow: 0px 4px 8px var(--desaturated_blue);
position: relative;
top: -50%;
left: 50%;
margin-top: 30%;
transform: translate(-50%, -50%);
}
To center your container, you can use grid or flex and add it into the body. Also add a min-height to your body to cover the whole viewport.
using flex
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
using grid
body {
min-height: 100vh;
display: grid;
align-content: center;
justify-content: center;
}
Then your container styles should look like this.
.container {
background-color: #fff;
width: 450px;
border-radius: 8px;
box-shadow: 0px 4px 8px var(--desaturated_blue);
}
I hope this helps you fix your solution.
0
