Ecem Gokdogan• 9,380
@ecemgo
Posted
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
min-height: 100vh
to thebody
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
- If you use flexbox in the body, you don't need to use
margin
in the.container
to center the card - If you use
max-width
, the card will be responsive and you can increase the width a bit
.container {
/* width: 250px; */
max-width: 280px;
/* margin: auto; */
/* margin-top: 100px; */
}
- Finally, if you follow the steps above, you won't need to define media queries for this solution because the card will already be responsive and you can remove them to clean the code
/*
@media (max-width: 375px) {
.container {
width: 80%;
}
}
*/
Hope I am helpful. :)
Marked as helpful
0