Skip to content
Submitted almost 3 years ago

Responsive Testimonial Grid Section Using Grid-Template-Area

Caleb Sim•410
@CodeLamp168
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I am a novice in terms of CSS Grid Syntax, luckily this format was a bit more simple. The CSS and HTML for the testimonials were not difficult to create, took about an hour and a half.

Used transitions to make the transformation from mobile to desktop more pleasing to look at and added a very simple hover effect.

The one big flaw I have with my CSS is the centering of my content when its on its desktop format. I simply added the syntax: "body { margin-top:11rem }" to center it. But I know that wont be good for certain users and websites. If you want to look into the media query in my css and see what other method I could use. I would be grateful for the tip.

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

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

  • Daniel•100
    @danM51

    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!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord