@danielmrz-dev
Posted
Hello @AntonielAureliano!
Your project looks great!
I noticed that you used margin to place the card in the middle of the page.
Here's two very efficient ways to center the card:
- You can apply this to the body (in order to work properly, you can't use position or margins):
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
I hope it helps!
Other than that, great job!
@AntonielAureliano
Posted
@danielmrz-dev You can be sure it will help me a lot. Thank you very much!! ❤️
@MelvinAguilar
Posted
@danielmrz-dev "works well with projects with only one centered element, like this one" This is one of the worst challenges to use position: absolute 😢. Due to the length of the element, it will definitely be hidden on small screens in landscape orientation. That's why a few days ago, someone recommended not using position: absolute. It can also cause width problems that are only resolved with width: 100%, one more line of code.
If I change everything to position: absolute and remove the margin, this is like THIS solution looks: https://imgur.com/56J83mx
Where did the image part go if I haven't scrolled? position: absolute centers it so precisely that it hides it. It's not suitable for this type of challenge.
@danielmrz-dev
Posted
@MelvinAguilar
Thanks Melvin, I have never noticed that landscape orientation detail. It never occured to me, since most projects like this fit normally in portrait orientation. I'm gonna remove that part from the comment. And from the next ones too. Thanks again! 😊
@danielmrz-dev
Posted
Glad it was helpful ! 😊
And please, check the other comments too, I first gave you an innacuratte information! Sorry about that 🙌🏼
@AntonielAureliano
