Submitted 6 months ago

testimonial grid section with tailwind, grid and flex-box

Smaylen5• 430

@Smailen5

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

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.

Community feedback

James Brown• 260

@jamesbrown173

Posted 2 months ago

**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.

<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

Smaylen5• 430

@Smailen5

Posted about 2 months ago

thanks for the advice, fixed it immediately, I didn't understand where the problem was@jamesbrown173

Please log in to post a comment

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