Simple QR code component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Fala Rafael Elias, tudo bem? Parabéns pelo desafio!

  Acabei de olhar sua solução e o desafio ficou quase perfeito, só ficou faltando a imagem e o container responsivo, o jeito de consertar isso é simples, vc tem que substituir o width na imagem e no container por max-width pra faze-la ficar responsivo, note que a diferença entre essas duas propriedades é que width é uma propriedade fixa e max-width faz o container ter uma largura máxima mas também pode diminuir. Então, caso você queira que um elemento seja responsivo não use width.

  Para tornar sua imagem totalmente responsiva, adicione display: block e max-width: 100% e object-fit: cover para fazer o corte automático da imagem ao redimensionar dentro da coluna:

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

  👋 Espero ter ajudado e continue no foco!

  0