qr-code-component

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted about 1 year ago

  Hello @bbvrp. Congratulations on completing this challenge!!!🎉

  Your solution looks great and I have few tips you might be interested in to improve your solution.

  • Every website should have at least one landmark so you wrap your content using main tag.
  • Add min-height: 100vh on the body and your qr code component will be placed in the center of the page.

  CSS 🎨:

  • Font size shouldn't be pixels because pixels is an absolute unit that doesn't scale if a users change the font size in their web browser setting.

  More info📚:

  • Font size shouldn't be in pixels

  When writing CSS you want to implement the DRY principle (Don't Repeat Yourself) You can add text-align: center on your .text instead of writing the property on multiple selectors.

  .text{
   text-align:center;
  }
  

  • The code below needs to be updated
  • Add the font-family to the body and make sure you have fallback of sans-serif if Outfit doesn't load.
    • font-family: Outfit, sans-serif;
  • I suggest you look at the shorthand property for padding and margin.

  More info📚:

  • CSS Shortand Property

  text h1{
      font-family: 'Outfit';  
      color: hsl(218, 44%, 22%);
      font-size: 22px;
      margin-top: 20px;
      padding-left: 30px;
      padding-right: 20px;
      text-align: center;
  }
  
  .text p {
      font-family: 'Outfit';
      color: hsl(220, 15%, 55%);
      text-align: center;
      padding-left: 28px;
      padding-right: 28px;
  }
  

  Hope this helps you and have any questions I would be glad to answer them just let me know✌🏼

  Marked as helpful

  0
• 

  AmerDakelbab•180

  @AmerDakelbabPosted about 1 year ago

  Try using justify content and align items to center

  0