Responsive Testimonials Grid Section

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @VishwajeetBarve, congratulations on your new solution!

  I’ve some suggestions for you:

  1.You've missed the color for the background, in this case is background-color: #EDF2F8 and add it to the body.

  2.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.

  3.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:

  @media only screen and (min-width: 1000px)
  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  0