Basic styles, some flexbox.

Community feedback

• 

  Maicon Rodrigues Monteiro•120

  @maiconrmonteiroPosted almost 2 years ago

  Olá, ficou muito lindo o seu desafio, sou aprendiz mais posso colaborar com o seu projeto centralizando o conteudo da pagina, pois dessa forma ele ficou no topo. Para resolver você poderia usar o flex-box na sua tag body. Com toda certeza ficaria perfeito.

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

  Se não resolver pode me chamar que te ajudo com todo prazer, uma abraço.

  Marked as helpful

  1

  ---

  

  Patryk Biegański•40

  @BieganskiPPosted almost 2 years ago

  @maiconrmonteiro Thank you for your sugestion, works perfect. THANK YOU.

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Patryk Biegański, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

  To improve the responsiveness of the project, we can make some changes:

  .qr__card {
      max-width: 20rem;
  }
  .qr__code {
      max-width: 18rem;
      width: 100%;
      height: auto;
  }
  .qr__texts {
      max-width: 18rem;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hello Patryk, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • add descriptive text in the alt attribute of the images
  • remove all margin from .qr__card class because with flex they are superfluous
  • use flexbox properties to the body to center the card. Read here -> best flex guide
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  1

  ---

  

  Patryk Biegański•40

  @BieganskiPPosted almost 2 years ago

  @denielden Thanks a lot, I have implemented all of your tips.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @BieganskiP You are welcome and keep it up :)

  Marked as helpful

  1