Skip to content
Submitted 9 months ago

Usei display flex para dar responsividade a página

Douglas Silva•130
@douglass154
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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,270
    @danielmrz-devPosted 9 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
    1
  • Ismael Paul•200
    @ismaelpaulPosted 9 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
    1

Please log in to post a comment

Log in with GitHub

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