Responsive Testimonials (Grids & Sass)

Community feedback

• 

  Jesse•110

  @vinshield

  Posted over 4 years ago

  Hi,

  I too faced challenges when trying to implement media queries while using grid-template-areas. It's possible to do though. Here's what my solution looked like:

  @media (max-width: 500px) { .container { margin: 20% auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "item1" "item2" "item3" "item4" "item5" ; } }

  You can see the full thing here: https://www.frontendmentor.io/solutions/responsive-testimonial-section-using-gridbox-cNd0zW1f-

  Cheers!

  10
• 

  Dragos Popescu•320

  @ospop

  Posted over 4 years ago

  I think grid-template-columns: 1fr enabled grid-template-areas to work in your case. I only updated grid-template-areas in my media query. I will try this next time I use grids. Thanks for the input!

  01