QR code Component

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Good job in this challenge. Viewing the solution, I think you should consider the following as well…

  • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics
  • Adjust the margin in the .card rule set with margin: 7rem auto; and padding into padding: 1.5rem;
  • Remove margin-top: 10px; and set the width into 100% in img rule set
  • Remove width: 80%; in .innercontent p, h3 rule set and add font-size: 22px; in h3
  • Wrap this line <div class="card"> with main tag

  Above all, Well done! Keep it going!

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Sidddharthamishra, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • add main tag and wrap the card for Accessibility
  • To make it look as close to the design as possible remove margin-top from img element and set width: 100%;
  • remove all margin from card class and set padding: 1rem;
  • try to use flexbox to the body for center the card. Read here -> best flex guide
  • after add min-heigth: 100vh to body because Flexbox aligns to the size of the parent container

  Overall you did well :)

  Hope this help and happy coding!

  Marked as helpful

  0