QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Fala Edson, tudo bem? Parabéns pelo seu primeiro desafio e seja bem vinda a comunidade do Frontend Mentor!

  O seu card do QR CODE ficou muito bom, pra melhorar ainda mais, ficou faltando deixar o container e a imagem responsiva. Pra fazer isso você precisa substituir os width com max-width. A diferença entre os dois é que width tem uma largura fixa e impede do container crescer ou diminuir já o max-width permite que o container tenha uma largura máxima mas possa diminuir pra ajustar com a tela.

  Pra fazer com que a imagem pegue a lagura total do container menos o padding, vc precisa colocar display: block e max-width: 100% desse jeito ela cresce o tamanho do container e ajusta de acordo com o tamanho dele.

  img {
      display: block;
         max-width: 100%;
  }
  

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  2

  ---

  

  Edson Paulino•50

  @schifferedsonPosted about 2 years ago

  @correlucas Obrigado Lucas, foi de grande ajuda.

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @schifferedson Fico feliz em ter ajudado Edson, continue no foco

  0
• 

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Hi Edson. Nice work and welcome to Frontend Mentor! I just submitted QR code a couple of days ago, so I'm also new. One thing I learned while working on that challenge is about the importance of the main tag. I rarely used it in the past, but I read that it helps screen readers and is also semantic. Consider using the main tag to wrap your content rather than the div.

  Here's an informative article that talks about it and all the other HTML5 semantic tags:

  HTML5 Semantic Tags: What They Are and How to Use Them!

  Marked as helpful

  1

  ---

  

  Edson Paulino•50

  @schifferedsonPosted about 2 years ago

  @natashapl Thank you :)

  1