Testimonial Grid Section

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  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

  4

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  This is my solution for this which may help https://www.frontendmentor.io/solutions/mobilefirst-css-grid-layout-with-scss-and-flexbox-in-card-headers-gyfp18V1o

  Remember to upvote every comment you find helpful ☺

  0

  

  Naveed•60

  @Naveed-1998Posted almost 4 years ago

  @grace-snow Thanks for all the tips, I'll make sure to remember this for next time

  0
• 

  Ahmad Reza•40

  @ahmad-reza619Posted almost 4 years ago

  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 :)

  2
• 

  Kyrylo Lvov•160

  @kyrylolvovPosted almost 4 years ago

  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! 🎄

  1