QR code component (FLEX)

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <section> with the main tag, <h2><p> with <h1> and <h3><p> with <p> to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  Give .QR a fixed width instead of a percentage width, the fixed width can either be 300px or 400px. Add min-height:100vh to the section/the main to center .QR on the page using flexbox, instead of giving it a margin-top value. There is no need to give .QR a margin value.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To there is no need to give the text a font-size.

  Hope am helpful Happy coding.

  Marked as helpful

  1
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY YOUXIE!

  Congratulations on completing your first challenge

  Concerning your question about centering, One of the best ways for centering would be to give the body a height of 100vh height:100vh then a display of grid display: grid and then using the code place-items: center

  There is no need to place a p inside an h2 or h3, this will get rid of the error on your HTML report.

  You will also need to increase the width of your parent container and set a max-width for as well so that it does not constantly increase in size.

  HOPE I COULD BE OF HELP :)

  HAPPY CODING!

  Marked as helpful

  1

  ---

  

  -YOUXIE-DEV•30

  @YOUXIE-DEVPosted almost 2 years ago

  @Nadine-Green Thank you for your answer, I will apply what you told me!

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @YOUXIE-DEV

  Glad i could be of help :)

  1