Responsive Testimonial Grid Section Using Grid-Template-Area

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Caleb Sim, congratulations for your new solution!

  Your solution is amazing, I liked a lots the animation you add for the card while hover. Two things you can improve is the box-shadow and the general semantics.

  To have a better shadow give it less opacity try this value instead: box-shadow: 40px 60px 50px -47px rgb(72 85 106 / 25%);

  You can improve your semantics by replacing main <div> with <main> and then also replace the <div> that wraps each card with <article> and the paragraph with the quote with the property tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  👋 I hope this helps you and happy coding!

  0
• 

  Daniel•100

  @danM51Posted over 2 years ago

  This looks great, love the animation. To help you centre content a lot better, have a look at Flexbox; the easy way would setting the content element to display: flex; and align-items & justify-content centre . This will centre the content regardless the screen size (in regards to the viewport constraints set) hopefully this helps, keep it up!

  0