Skip to content
Submitted over 2 years ago

QR Code Component Main

Gustavo de Camargo Campos•200
@themegazord
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

Community feedback

  • Lucas 👾•104,280
    @correlucasPosted over 2 years ago

    👾Fala Gustavo, beleza? Parabéns pela sua solução!

    Dei uma olhada na sua solução aqui e ficou muito boa! Meu conselho seria só reduzir um pouco a estrutura de html, usando uma só div pra segurar tudo e colocar cada elemento solto lá, pq vc consegue controlar tudo com uma div só e cada elemento separado, olha a estrutura abaixo:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    Pra deixar o container responsivo, você tem que arrumar a imagem com display: block e max-width: 100% desse jeito a imagem diminui acompanhando o component e nem precisa dar um tamanho pra ela, já que ela vai ser 100% do container menos o padding.

    Em relação ao border-radius é melhor não usar porcentagem porque é uma unidade relativa e a borda vai variar quando o container escalar, ao invés disso use 12px

    .content {
    border-radius: 12px;
    max-width: 20rem;
}

.img__container img {
    display: block;
    /* width: 18rem; */
    border-radius: 5%;
    max-width: 100%;
}

    Espero ter ajudado e continue no foco!

    Marked as helpful
    1
  • Gustavo de Camargo Campos•200
    @themegazordPosted over 2 years ago

    Fala aí, Lucas, tudo sim e com você?

    Então cara, eu estou começando agora no front-end, estou me adaptando ao full-stack, visto que já sou back-end e no momento eu tenho mais segurança separando tudo por div, mas com o tempo vou separando as coisas para ter apenas uma div.

    Muito obrigado pelo feedback, vou tentar nos próximos desafios para tentar fazer isso que você disse.

    Fique bem :-)

    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