Submitted 7 months ago

Usei display flex para dar responsividade a página

Douglas Silva• 110

@douglass154

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

tenho duvidas em relação a propriedade position do CSS, eu utilizei ela mas não tenho certeza absoluta de como utiliza-la com maestria, tenho muita dificuldade. Também gostaria de um feedback de como eu poderia deixar meu código mais limpo, tenho certeza de que, de tudo que eu escrevi lá, dava pra retirar pelo menos 15% do código, deixar de maneira mais limpa e efetiva e continuar com os mesmos resultados ou melhores.

Community feedback

Daniel 🛸• 44,230

@danielmrz-dev

Posted 7 months ago

Fala @douglass154!

Seu projeto ficou ótimo!

Notei que você utilizou position: absolute pra centralizar o card. O position:absolute pode causar bugs e fazer parte do seu conteúdo ser cortado em telas menores.

📌 Existe uma forma melhor e mais eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):

Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):

body {
    min-height: 100vh;
    display: flex; /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}

Espero que ajude!

Fora isso, você fez um excelente trabalho!

Marked as helpful

Ismael Paul• 200

@ismaelpaul

Posted 7 months ago

Eaí Douglas, beleza?

Primeiramente, parabéns por ter completado o desafio.

Nesse caso em particular eu não usaria position, eu aplicaria flex no body para centralizar o card.

Eu aplicaria padding na classe container, assim tu garantes que o padding vai ser igual para os outros elementos <img>, <h1> e <p>. Com esse padding, não precisarás do max-width no <h1> e no <p>. A font-family poderia ser aplicada no <body>, aí não precisas repetir no <h1> and <p>. Também acho que não precisas de display:block no <h1>.

Espero ter ajudado um pouco, qualquer coisa dá um toque.

Happy coding :)

Marked as helpful

Please log in to post a comment

Join 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