Design comparison
Solution retrospective
Any tips and recommendations are welcome. Feel free to comment.
Community feedback
- @correlucasPosted about 2 years ago
👾Fala Paulo, tudo bem? Parabéns pelo desafio!
EU queria te deixar umas dicas pra você alinhar ele usando
flexbox
que é o método mais fácil de todos.A primeira coisa que você tem que fazer é adicionar algumas propriedades pro body, primeiro adicionamos
display: flex
eflex-direction: column
pra alinhar tudo na vertical. Depois adicionemin-height: 100vh
(isso vai fazer com que o body tenha 100% da tela como tamanho) e com isso o elemento filho (no caso o container) vai se alinhar ao tamanho dele, no caso 100% da tela, dessa forma ele ficará centralizado, entendeu?O valor da sombra do componente está um pouco forte, você pode melhorar isso colocando menos
opacity
e maisblur
, aqui um valor bom pra essa sombra:box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 5%);
. Pra melhorar a performance em diferentes dispositivos e tipos de tela você pode usarrem
eem
ao invés depx
.👋 Espero ter ajudado e continue no foco!
Marked as helpful2@sqirumPosted about 2 years ago@correlucas Obrigado Lucas, a dica de usar rem e em foi bastante boa e importante. Muito obrigado amigo :)
1 - @AdrianoEscarabotePosted about 2 years ago
Hi @sqirum, how are you?
I really liked the result of your project, but I have some tips that I think you will like:
1- Document should have one main landmark, you could have put all the content inside a
main
tag.2- I noticed that you centered the card with
position: absolute;
, an advice I give you, prefer to use flex-box in these cases, for example:body { min height: 100vh; display: flex; align-items: center; justify-content: center; }
The rest is really good!
Hope it helps... 👍
Marked as helpful1@sqirumPosted about 2 years ago@AdrianoEscarabote Thank you for the advice, didn't even considered the display flex with min-height option but seems way better solution. Will try in my next challenge. The main tag was a neglect by me, but thank you for reminding me that's important to follow the good practises. Really helpful comment :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord