Testimonials grid

Community feedback

• Account deleted

  Might be worth adding in a media query at about 1000px to help with the responsiveness of the page, potentially moving Kira's box to the bottom? It might help with the transition from desktop to mobile.

  Marked as helpful

  0
• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Hello Jonathan! Congrats on your submission. A couple of things to note:

  • The prescribed font for the challenge hasn't been applied.
  • Your page is not quite fully responsive
  • You should centre your solution to the browser page. You can do this by adding this to the body in css

  body {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     margin: 0 auto;
  }
  

  • Rather than use divs throughout, you could use the <article> element for the individual testimonials to make the markup more semantic. Just remember to include a heading. In this case, you could just wrap the person's name in an h
  • You could also replace the div (with selector .main-container ) with the main tag. This would help resolve the accessibility issue pertaining to landmarks.
  • Your page is missing an h1. For accessibility reasons, pages require one h1 element. For the nature of this challenge, you could add an h1 e.g: <h1>Testimonials grid section </h1>, visually hidden on screen but visible to screen readers. You can use this post as a reference..

  Happy coding!

  Marked as helpful

  0

  ---

  

  Jonathan•295

  @Nathan-FrontPosted about 3 years ago

  @dewslyse Thanks for the comment. So that is how they center it when zooming. I'll try the other options. once again thank you

  0