Somewhat responsive testimonial section HTML and CSS

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted over 3 years ago

  Hi B@i$ya, for the desktop view: if you unset align-items: center from your .container and adjust Kira's grid-row from 1/4 to 1/3, they should all line up nicely. In addition, I suggest adjusting (or removing) all the margins on .container and use flexbox to center the component. Try this on body:

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  

  • For smaller screens, I recommend applying max-width on the grid container so that it doesn't touch the left and right gutters and will also avoid stretching of the testimonials.

  • The semantics can also be improved. I noticed the heading tags start with h5 and jump to h3. Best practice would be to start with a single h1, and the numbers get smaller as you go through the document. There are divs here as well that could be exchanged for more meaningful tags. I suggest having a look at Grace's solution and here's an article as an overview.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  ShohagB.•195

  @devindivPosted over 3 years ago

  @emestabillo Thank you! works like magic!

  1