testimonial cards using grid

Community feedback

• Account deleted

  Hello, good job. Here are some recommendations I'd like to share:

  • Try setting position: relative to .card instead of .cards img, and add top: 0 to mg.quotation so that it stays in the correct position relative to the .card container. This might solve the overflow issue you are experiencing when reducing the screen size.

  • To ensure everything is centered on the screen, I recommend adding min-height: 100vh; display: grid; place-items: center to the body element.

  • Additionally, instead of using grid-template-columns with order for the cards, you could implement the following css lines:

  .cards {
      grid-auto-columns: 1fr;
      grid-template-areas: 
      'one one two three'
      'four five five three'
      ;
  }
  
  
  And for each '.card', do something like:
  
  .purple {
      grid-area: one;
  }
  
  .grey {
      grid-area: two;
  }
  
  ...
  

  • Additionally, I believe you could benefit from adopting a CSS naming convention such as the BEM Methodology. For more info, visit BEM

  I hope this helps. Good luck!

  1