Simple css flex solution

Community feedback

• 

  md_mark•180

  @mohdahsanrazakhanPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge!

  I have recommendations regarding your code that I believe it will great interest to you.

  HTML: This solution generates accessibility error reports. So fix it by replacing the <div class="main"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

  You should add one h1 tag inside your main tag and add alt="QR code image" attribute inside <img src="images/image-qr-code.png">

  In place of <div class="attribution"> you should use footer tag.

  I hope you find this helpful.

  Happy coding!

  Marked as helpful

  1
• 

  Michał Maciejewski•30

  @SGMaxisPosted over 1 year ago

  You forgot to set the height of the body element. Set it to 100vh. It's required if you want to use align-items: center; to center the box on the screen.

  3
• 

  Victor Brito•250

  @VictorBrito13Posted over 1 year ago

  You can add this to your body:

  This gonna make that the body takes the 100 percent of the viewport and the align-items gonna take the desire effect

  { min-height: 100vh; margin: 0px; }

  2
• 

  Kabrax01•100

  @Kabrax01Posted over 1 year ago

  To your body tag add: min-hight: 100vh

  and You are set :D

  FIrst <h> element on page should always be <h1>

  Also You should edit or remove attributions section.

  Anyway good job 👍and keep it up! 🏋️‍♂️

  1