Testimonials using CSS Grid

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Great work on this one. Layout in desktop is fine though it is much wider than the original and takes up more space. The responsiveness is fine, but could be better like, since this is a grid, a great idea would be to have a 2x2 layout, for example, from desktop layout, resizing, the 2x2 layout would take form so that you don't have to make the elements squeezed out just to transition in mobile layout.

  Some other suggestions would be:

  • Avoid having multiple h1 on a webpage, use only at least 1 h1 per page. On this one, the h1 would be really suited if it is a screen-reader only text. Have a look at Grace's solution, inspect the layout and see the usage of h1 as well as the css stylings on that h1.
  • Every img of each person should only use their name as the value like `alt="Daniel Clifford", do not add words that relates to "graphic" such as "profile, picture, image, logo.." assistive tech will handle those for you.
  • Each testimonial topic title is not great to be using heading tags, the name of the person per testimonial is enough to be heading tag.
  • On your main element, avoid using height: 100vh since this will make the element's height limited to only the current viewport/screen's height. You could remove this or replace it with min-height: 100vh this takes full height and will expand if it needs to.

  Other than those, great job.

  Marked as helpful

  0

  ---

  

  Musa•170

  @its-me-musaPosted about 3 years ago

  @pikamart thank you for the feedback. much appreciated

  0
• 

  dewslyse•3,025

  @dewslysePosted about 3 years ago

  Nice work on the testimonial grid Musa. The grid should be centred to the page and the max-width on .testimonials should be set to something lower. For this challenge, max-width is about 1110px. Setting the max-width to 1110px will cause the grid to be a little 'taller'. You should then set the font-size (e.g.: 1.3rem) on your h1 and alter the margins and or paddings on the .testimonial to get it to the right height.

  Also, remember to wrap .attribution in a <footer>

  All the best!

  Marked as helpful

  0

  ---

  

  Musa•170

  @its-me-musaPosted about 3 years ago

  @dewslyse thank you ... I will look into the comments you mentioned. Much appreciated. Kind regards

  0