testimonial grid section with tailwind, grid and flex-box
Design comparison
Solution retrospective
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
- @jamesbrown173Posted 4 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.
<!-- 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 helpful0@Smailen5Posted 4 months agothanks for the advice, fixed it immediately, I didn't understand where the problem was@jamesbrown173
1
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