Componente QR Code responsivo

Hi 👋, perhaps some of these tips may interest you:

HTML 🧱, ACCESSIBILITY ⚖:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• Every page should have an <h1> to improve user experience and because it is an important element when it comes to SEO. Maybe the 'texto1'...

CSS 🎨:

• The page content could be centered using Grid or Flexbox. This may be the easiest way:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

And I think you could remove the '.container' .

• And you might consider using some CSS reset as a good practice at the start of each project, to have a clean starting point and reduce differences between browsers. For example, these are some very common and useful ones:

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

(this will remove the horizontal scrollbar you have, for example)

I hope you find it useful, any questions do not hesitate 🙂

Regards,

Para centralizar podes fazer o seguinte:

body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}


.container {
width: 100vw;
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

e a parte do html podes por a div class "attribution" toda dentro da div "container" entao fica o container pai da div com a classe"qrcode" e a div com a classe "attribution"

Sugiro tambem voce resetar o css antes de tudo. Esse site aqui ja te da tudo pronto. E' so copiar e colar no inicio do seu estilo css https://meyerweb.com/eric/tools/css/reset/