QR Code Component design using flexbox and using viewport height

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello Urinzi! 👋

  Congratulations on completing this challenge! 🎉

  In this case, the best way to center the card element is to make the body element as either grid or flexbox container. So, I would recommend removing the flex properties from the card element. After that, add place-items: center and use min-height instead of height property.

  place-items: center is equal to justify-content: center and align-items: center. I recommend using min-height because it will make sure that the body element would allow to grow if ever needed.

  Some best practices.

  • figure element doesn't need to wrap the img element. The only reason to use figure is if you need to include a figcaption. Otherwise img tag is fine.
  • Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 😉

  I hope this helps!

  Marked as helpful

  0

  ---

  

  Jork•230

  @jc-paduaPosted over 2 years ago

  @vanzasetia Thank you so much! It would be very helpful in improving my responsive designs and the proper use of elements in HTML. I'm grateful to have advice from an expert like you. Thank you so much! It motivates me a lot!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @jc-padua No problem! 😄

  0