Testimonials grid section

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  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)! 😁

  1
• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  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

  2. 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!!

  1