@LuisJimenez19
Posted
Hello! Congratulations on completing the challenge.
One recommendation is that you remove the styles that the browser brings by default, you can do something like this:
.*,
*::before,
*::despues de{
margin:0;
padding:0;
box-sizing:border-box;
}
Very well centering the card. In this case, when it is a single card, I don't think it is necessary to use a media query to reach the objective (I think you are using the media query wrong, I don't know if there are phones with 1440px screens) what you can do is give it a width:90%
to the card and give it a maximum width that they ask for, for example max-width:375px
This is how the container would look:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
overflow: hidden;
}
And this is how the card would look:
.card {
background-color: var(--white);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
padding: 1.2rem;
border-radius: 1.5rem;
/* width: 50%; */
/* max-width: 20%; */
width: 90%;
max-width: 375px;
}
I hope I have helped you, greetings.