Responsive Testimonial Grid Section - CSS Grid, Flexbox, Sass

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @erickhangati, congratulations on your new solution!

  I’ve some suggestions for you:

  1.Fix the alignment of the whole content using flex and min-height to manage the vertical alignment and make everything centered.First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size that's now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  body {
      min-height: 100vh;
      font-family: "Barlow Semi Condensed", sans-serif;
      font-size: 1.3rem;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  2.You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 1110px.

  3.The html structure you’ve used here works, but if you want to make this even better, you can replace the <div> you’ve used to keep the blocks and replace with some better html markup and semantic, for example, the main block can be wrapped with <main> and each testimonial card with <article>, then you can use a tag that not everyone knows, for the paragraph containing the quote you can replace the <p> with <blockquote> that is tag the describe exactly its content.

  This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Eric Khang'ati•430

  @erickhangatiPosted about 2 years ago

  @correlucas thank you for the advice. I have made changes on the recommeded areas. Is it good now?

  I really appreciate for that feedback. Thank you.

  0