Social Proof - Guido Aranda solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @GuidiUZ, Congratulations on completing this challenge!

  Two tips for you:

  Fix the alignment. The best way make this alignment is by using FLEXBOX. The first step, is to add min-height: 100vh to make the body height size becomes 100% of the viewport height, this way you make sure the container will be aligned vertically since the body will display ever 100% of the screen height. After that add two flex properties to make the alignment display: flex / align-items: center; / justify-content: center;. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

  body {
      min-height: 100vh;
      font-size: 15px;
      font-family: 'Spartan', sans-serif;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the quote text you can improve the accessibility there using <blockquote> to indicate to screen readers that the content inside that paragraph is a quote.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0