QRCODE COMPONENT

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Fala Raissa, 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!

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Rayssa Santana,

  Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • You should use <main> to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor .the alternate text should not be hyphenated , it should be human readable.

  • Page should contain one level heading. To tackle the accessibility issue in this challenge, you may use<h1> instead of <h3> .

  • Add min-height: 100vh instead of height: 100vhto the body that let the body grows taller if the content outgrows the visible page instead.

  Hopefully this feedback helps.

  0