Testimonials grid section

Hey, Milton Chung!

Good work on this challenge! 👍

In addition, to artimys' great feedback, I suggest,

• Adding some space (using margin or padding) between the top and bottom sides of the content and the edges of the screen (in the desktop layout) so that there's some space between the content and the page on smaller desktop screens.

Keep coding (and happy coding, too)! 😁

Hey there Milton, good job on completing the solution. There is that bottom gap in the bottom left and the long right card. font-size looks good in the screenshot so I would say make the width a tad smaller on the card if possible.

I haven't tried this solution out yet but some other ways to build out this layout if interested. This was a good read when I first started with grid

Article: Realizing common layouts using CSS Grid Layout

--

Try removing your leftSide topSide , leftSide botSide, rightSide div containers and utilize display: grid on main.container then:

1. try numbered grid column/rows

• Use a media query to change grid-template-columns from 1fr to 2fr 1fr 1fr
• Use numbers for grid-rows and grid-columns for each card to span columns and rows

1. or grid template areas. Instead of numbers use names.

• Define grid-area for each card div by giving them a name. I made up 5 names below then added them to the grid template area

grid-template-areas:
"purple   gray   white2"
"white1  black white2";

Hope it helps and keep on coding!!