QR Code component HTML/SCSS

Community feedback

• 

  Adriano•38,080

  @AdrianoEscarabotePosted almost 2 years ago

  Oi Cauê Souza, tudo bem?

  Gostei muito do resultado do seu projeto, mas tenho algumas dicas que acho que você vai gostar:

  Como você sabe, este projeto é baseado apenas em um componente de página, portanto, não é necessário h1! pois não sabemos se esta página terá um componente mais importante, mas é sempre bom prevenir erros de acessibilidade então acho que seria bom você adicionar um h1 nesse componente, além de ser uma boa prática para quando você está desenvolvendo sites maiores, não se preocupe, esqueça o h1.

  main {
      min-height: 100vh;
  }
  

  Use min-height em vez de height, pois quando o conteúdo for além de main o conteúdo acabará sendo ocultado! faça o teste aumentando a altura do article!

  o resto é ótimo!

  espero ter ajudado... 👍

  0

  ---

  

  Cauê Souza•40

  @cauesooouzaPosted almost 2 years ago

  @AdrianoEscarabote fica tranquilo que questão de acessibilidade e seo, esta bem otimizado, e enquanto ai height, não faz diferença pois se fosse uma pagina com outros elementos, nao seria feito dessa forma utilizando 100vh, ele seria em tamanho relativo, ocupando somente o espaço necessario, o 100vh foi utilizado somente para questões de centralização, obrigado pela sua ajuda mas não é necessario alterações

  1

  

  Adriano•38,080

  @AdrianoEscarabotePosted almost 2 years ago

  @cauesooouza boaa

  0
• 

  Jhan Galvis•80

  @AltairCGSPosted almost 2 years ago

  To properly center your content to your page, you will want to add the following to your Body element (this method uses CSS Grid):

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

  A little advice that they gave me before :3 I hope this helps! Keep up the good work!

  0

  ---

  

  Cauê Souza•40

  @cauesooouzaPosted almost 2 years ago

  @AltairCGS ins't a good a idea give height to body... when you need to center a element in axis x use: margin: 0 auto; when you need to center a element in axis y use: flexbox

  0