QR Code component using HTML, CSS Flexbox

Community feedback

• 

  Khawar Mehfooz•530

  @KhawarmehfoozPosted over 1 year ago

  Hi! 👋 Congratulations on completing the challenge!

  I have some suggestions to improve the solution:

  • Add the following CSS properties to the body to properly center the content on the middle of screen:

  height:100vh;
  display: grid;
  place-items:center:
  

  • Add the following CSS Properties to .attribution:

  position:absolute;
  bottom:0;
  

  This will place the attribution in bottom.

  Happy coding!

  Marked as helpful

  0

  ---

  

  Romina Bonetto•20

  @Romina-BonettoPosted over 1 year ago

  @Khawarmehfooz thanks you for your help. Tried the attribution properties tip and it's great!

  0
• 

  CodeBot•200

  @Emperor-ShadowPosted over 1 year ago

  When you use flexbox, you have to set the body's height to 100% of the viewport height Then the align items and justify content will work Just like this

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

  And justify content is to center it horizontally whilst align items is to center it vertical. I wish you all the best Happy coding

  Marked as helpful

  0

  ---

  

  Romina Bonetto•20

  @Romina-BonettoPosted over 1 year ago

  @Emperor-Shadow thanks for the feedback, it worked! Happy coding.

  0
• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  instead of height : 100vh use min-height:100vh

  0

  ---

  

  Romina Bonetto•20

  @Romina-BonettoPosted over 1 year ago

  @NehalSahu8055 thank you for the advice!

  0