Skip to content
Submitted over 1 year ago

testimonial grid section with tailwind, grid and flex-box

tailwind-css
P
Smaylen5•600
@Smailen5
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud that I aligned the cards correctly using grid. Next time, I'd like to change the default font size to be more similar to the layout.

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

The biggest challenge was creating a layout that didn't break on tablets. Unfortunately, I couldn't solve the issue; I think I need to set minimum sizes, but the text was overflowing from the cards.

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

How to create the layout for tablets so that it doesn't break on desktop.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • James Brown•260
    @jamesbrown173

    **Design: Good! Clean easy to follow. Maybe consider using a lighter font in the lower paragraphs.

    **Code: Well commented, easy to follow.

    You mentioned the text overflowing, if you remove the lg:h-full class in this div it should stop the text from overflowing. I think when you're using lg:h-full it expands the div to the full amount of the parent, in this case the parent is restricted in size by it's padding, I think, therefore the text overflows.

    <!-- Contenitore generale per grid --> <div class="lg:w-10/12 lg:h-full grid lg:grid-cols-4 lg:grid-rows-2 lg:gap-8 gap-6">
    Marked as helpful

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