Design comparison
Community feedback
- @correlucasPosted over 2 years ago
Fala Lucas, meu xará. Tudo bem? Parabéns pelo seu primeiro desafio!
Dei uma olhada no seu código e tenho umas dicas pra você!
O seu componente do qrcode tá quase pronto, mas eu queria te deixar umas dicas pra você alinhar ele usando
flexbox
que é o metodo 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?Continue no foco!
Marked as helpful0@LukiticasPosted over 2 years ago@correlucas Obrigadoo Luquinhas!! Adorei o feedback!!
Quanto ao body, alguns colegas meus me instruíram a evitar estilizar ele diretamente, por isso que o componente do qr code está dentro de um main, e esse sim eu apliquei as estilizações, e invés de flexbox eu usei algumas propriedades que aprendi recentemente:
display: grid; place-item: center;
Para posicionar o card no centro. Será que eu posso estilizar a tag body normalmente?
0@correlucasPosted over 2 years ago@Lukiticas O body geralmente eu usó pra alinhar os elementos que estão dentro dele e colocar o background. Do jeito que vc fez pra alinhar com o grid funciona tbm e é até melhor pq requer menos linhas de código.
Estiliza só o basico no body e as outras coisas voce aplica no container.
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