Frontend Mentor - Testimonials grid section solution

Community feedback

• 

  Brendan Hyde•330

  @hyde-brendanPosted almost 3 years ago

  Hi! Nice job completing the challenge. A couple comments:

  • The images becoming squashed whenever the name overflows to a second line can be fixed by adding an align-self to either start or center to your <img> elements. On that note though, the images are a bit larger than on the design (around 30px); you can afford to shrink them.
  • On that note, I would reduce the font size of the <h1> elements to prevent the peoples' names from taking multiple lines. The design has the same size as the main text (13px).
  • I would increase the font size of the .main-text elements to somewhere between 18px to 20px.
  • Remove the background-size property from .order-1; the stretching doesn't make the quotation mark look nice, and once you shrink the card header a bit it'll look more like the design anyhow.

  Hope this helps! For future work, see if you can use grid-template-areas for the layout, and multiple media queries for multiple layouts for tablets.

  Marked as helpful

  0

  ---

  

  Francis Obwogo•200

  @francobwogoPosted almost 3 years ago

  @hyde-brendan Noted. I will make the changes you have recommended. Thanks.

  0
• 

  Hexer•3,660

  @EmmanuelHexerPosted almost 3 years ago

  Great work overall man. Keep it up

  0

  ---

  

  Francis Obwogo•200

  @francobwogoPosted almost 3 years ago

  @Phalcin Thanks.

  0