Responsive testimonials page using CSS grid

Community feedback

• 

  P

  Michael•180

  @Networksentinel

  Posted 29 days ago

  Hi Sarah!

  I really liked your take on this challenge — the way the cards load when the page refreshes is cool!

  Also, I totally felt your pain when you wrote, “The gridddd, really stressed me out.” 😄 I could see it in your code, and honestly… same here! Grid layouts can be tricky, but you did a great job pushing through it.

  While going through your solution and checking out your code, I noticed a couple of small things — hope you don’t mind me sharing:

  1. Kira’s card not spanning as expected (600px–950px) At screen widths between 600px and 950px, the fifth card (Kira) isn’t spanning two columns — instead, it’s spanning two rows, probably because of this:

  @media (max-width: 950px) {
    .wrapper {
      grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
    .card.style5 {
      grid-column: 1;
      grid-row: span 2;
    }
  }
  

  I think what you might’ve meant was:

  .card.style5 {
    grid-column: 1 / span 2;
    grid-row: span 4;
  }
  

  2. Layout gap between 950px–1250px In this range, there’s an empty space in the bottom-right corner of the grid. Not sure if that was intentional, but you could fill that space by either:

  • Spanning the 4th card (Patrick) across the 3rd column:

  .card.style4 {
    grid-column: span 3;
  }
  

  • Or making the 5th card (Kira) span three rows:

  .card.style5 {
    grid-row: 1 / span 3;
  }
  

  I know it’s been 8 months since you posted this solution, so maybe you’ve already spotted these things or would handle them differently now. Either way, I hope this feedback helps a bit!

  Also, if you do happen to see this, I’d love to hear how you’re doing now! How do you feel about this solution looking back? Would you change anything? I think it’d be super interesting to hear your perspective after some time has passed.

  Thanks again for sharing your work — and if you don’t get a chance to respond, no worries at all. Keep up the awesome work, and happy coding! 😊

  00