Testimonial Grid Section

Hi, as others have said,

• use grid-template-columns in media queries
• remove the widths and heights from body
• definitely remove heights from the boxes

Really, the easiest way to make it properly responsive would be to :

1. Let mobile be the base you start from. Display flex column, use the gap property to set gap between boxes

2. At mobile size in a min width media query display grid and use named grid areas to lay out each box. Make the grid layout whatever you like that works

3. At desktop in a min width media query move your current desktop grid template properties

As long as you have a max-width on that grid, it should look great on any screen size.

Hope thats helpful

You can remove the width property on body.

and also you can try using grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); on grid class. it would try to be as responsive as possible, but still it would look horrible on tablet, you could use css media query in there and try adjusting the styling for each box when it's on tablet, mobile or anything. i hope this helps :)

Hey! 😄

Great job on this challenge! 🏆

I suggest using the "grid-template-columns" property in media queries to make the page responsive, since there aren't many ways in doing so with grid. 😊

Good Luck and Happy New Year! 🎄