Componente QR Code responsivo

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  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,

  2

  ---

  

  Adrianne Cavalcante•20

  @adrianneclpPosted over 1 year ago

  Thanks for the tips!@fernandolapaz

  0
• 

  Jarlei Sassi•170

  @jarleisassiPosted over 1 year ago

  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"

  2
• 

  Jarlei Sassi•170

  @jarleisassiPosted over 1 year ago

  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/

  1

  ---

  

  Adrianne Cavalcante•20

  @adrianneclpPosted over 1 year ago

  Obrigada pelas sugestões!@jarleisassi

  0