Skip to content
Submitted 7 months ago

Testimonial section CSS grid

yinnie•280
@wcyin9
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I had a lot of fun with this one. I think I'll revisit this challenge next time using CSS frameworks.

What challenges did you encounter, and how did you overcome them?

I struggled a bit getting the grid to work correctly. If you look at the bottom of the card on the very right, the height of it is slightly off from the other cards. I think it has something to do with the amount of rows/columns I made.

What specific areas of your project would you like help with?

Please let me know if there's any mistakes I made, or if there's better code I can implement.

Community feedback

  • M•940
    @Dev-MV6Posted 7 months ago

    Hi there 👋, your solution looks great.

    The reason your element with the .card5 class-name doesn't seem to be aligned correctly with the rest of the cards on the bottom of the grid is because you've set the max-height property to the element, restricting its maximum height to 572px.

    To solve this, simply tweak the value you've set for this property on your style-sheet:

    @media (min-width: 1110px) {
  .card5 {
    /* max-height: 572px; */
    max-height: 577px;
  }
}

    Hope you find this helpful 👍

    Marked as helpful
    0
    yinnie•280
    @wcyin9Posted 7 months ago

    @Dev-MV6 that worked, thanks a lot!

    0

Please log in to post a comment

Log in with GitHub

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