QR Code Component using HTML and CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Vandana, great work on this challenge! 😉

  Here are a few tips for improve your code:

  • replace the first div with main tag for wrap the card and improve the Accessibility
  • use h1 for the title of card and not h6 tag
  • remove .mx-auto class from div of card
  • remove margin-top and height from card class
  • use flexbox to the body to center the card. Read here -> best flex guide or with grid as @MinhKhangTran suggested
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container

  Overall you did well 😁 Hope this help!

  Marked as helpful

  0
• 

  Darko•980

  @dtomicicPosted over 2 years ago

  You could center the text with text-align: center; as the previous comment said and you can even take it one step further by setting the width of your text and header to 80% and setting margin: 0 auto; to both of them and you'll get a nice looking responsive centered text.

  You could also center the card with flex or grid so you can look that up to get a better sense of how it works.

  Other than that great job, keep it up :D

  Marked as helpful

  0
• 

  Minh Khang Tran•510

  @MinhKhangTranPosted over 2 years ago

  Hi Vandana, nice solution!

  If you want to center a text you can use text-align: center; in your css.

  also if you want to center your card vertically you can use the code below on your body.

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

  Marked as helpful

  0