Testimonials grid section using CSS Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hooola Dženita, congratulations for your new solution!

  Here's some tips for you:

  Give a proper size to your image thats distorting:

  img {
      display: block;
      max-width: 36px;
      border-radius: 50%;
      border: 3px solid rgb(136, 98, 197);
      /* max-height: 40px; */
  }
  
  .user {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-content: flex-start;
      /* max-width: 200px; */
      /* max-height: 30px; */
      margin: 20px 0 10px 25px;
  }
  

  Reduce the amount of divs to clean your code, you can use a div to hold the profile photo + text and the rest there's no need for div inside the card, this will gives you more control.

  You've used all the correct sematic tags for this challenge, you improve also the paragraph with the quote with the property tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Evandro•100

  @evandromarisPosted about 2 years ago

  Hallo Dzenita!

  Excellent work, on desktop and mobile version.

  Just an observation, remove of max-height: 30px; of the .user class, this way the images will be round, e uma dica.😊

  💡A tip, always check the accessibility of HTML right here on Frontend Mentor, to always improve the semantics of HTML for search engines.

  Good Job !🏅

  Marked as helpful

  0