Responsive challenge QR code

Oi Vinicius! O seu projeto ficou muito bom em tela grande, mas no meu celular está cortando.

Vou fazer algumas sugestões, tá bom?

Provavelmente isso está acontecendo porque você colocou a imagem como background.

Sugiro que você coloque a largura da div.container fixa (por exemplo, 300px) e coloque a imagem dentro da div.section__qr, com width de 90% (retira a imagem do background-image). Lembra de ajustar o border-radius da imagem.

Também retira todas as height, com excessão da do body.

Eu deixaria apenas uma media query, a de telas pequenas (375px).

Espero ter ajudado!

Fala Vini! @ViniCellist

Sua solução ficou excelente!

Tenho duas sugestões:

• Primeira: Por questões semânticas, e por ser o título principal da tela, você pode substituir o <h2> por <h1>. Ao contrário do que a maioria das pessoas pensa, a diferença entre os HTML headings não é só sobre o tamanho e peso do texto.

📌 As tags <h1> a <h6> são usadas para definir títulos em HTML.

📌 <h1> define o título mais importante.

📌 <h6> define o título menos importante.

📌 Use apenas um <h1> por página - isso deve representar o título principal de toda a página. Além disso, não pule os níveis de título - comece com <h1>, depois use <h2> e assim por diante.

• Segunda: Não precisa utilizar <main> e <section> pro conteúdo principal. Use apenas a tag <main>.

📌 Além disso limpar seu código, a tag <section> faria mais sentido se o card fosse parte de um site maior, mas aqui ele é o conteúdo principal.

Essas mudanças tem pouco ou nenhum efeito visual, mas tornam seu código HTML mais semântico, melhorando a otimização de SEO e também a acessibilidade do seu projeto.

Espero que ajude!

Fora isso, você fez um ótimo trabalho!