Responsive challenge QR code

Community feedback

• 

  P

  Flávia Reis•650

  @flaviare1sPosted 10 months ago

  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!

  Marked as helpful

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  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!

  Marked as helpful

  0

  ---

  

  Vinicius Duarte•60

  @ViniCellistPosted 10 months ago

  @danielmrz-dev Vou aplicar suas sugestões agora mesmo...muito obrigado!!

  0

  

  Vinicius Duarte•60

  @ViniCellistPosted 10 months ago

  @danielmrz-dev feito! Muito obrigado pelas dicas!

  0