Responsive QR Code using Flexbox and Grid

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="container">with the main tag,<h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .card on the page using grid, replace the height in the body with min-height:100vh

  For a responsive content and to avoid the qr-code covering the entering screen with screen-size 375px, replace the width of .card with max-width or you can reduce the value for it to match the width of the design.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0

  ---

  

  Rafael Marques•90

  @rafaelmarquesRMPosted almost 2 years ago

  @Hassiai Thanks for helping me! I really had forgotten about semantic tags.

  0
• 

  Nermen•270

  @NermenElefkyPosted almost 2 years ago

  Hi Rafael, Good job on completing the challenge👌 Here is some suggestions that I have received as a feedback before

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the <h2> tag with <h1>.
  • Use the <main> element to wrap all your content instead of <div>.

  I hope you find them useful. Happy Coding.

  0

  ---

  

  Rafael Marques•90

  @rafaelmarquesRMPosted almost 2 years ago

  @NermenElefky Thanks! I thought so much about a name for the element that I forgot the semantic tags haha.

  0