Submitted about 2 months ago

Testimonial grid section with Tailwind CSS

Quang• 350

@progressive-newbie263

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?

well, i am proud to say my first time trying out tailwind css in a project ended up decently xD. I expected it would have gone much worse.

I should have changed min-width for grid section to a bit higher. Maybe 900-1000px range

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

choosing tailwind for this grid section was a bad idea tbh. since the 5 card could have been finished faster with inserting class, and changing 5 of them as a whole.

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

idk why but when i use grid in tailwind, the padding bottom / margin bottom just disappear. Been searching for it but can't find any solution to fix it. I hope i can hear some tips and tricks about it

Community feedback

Vanessa• 150

@petrihcour

Posted about 1 month ago

Great job with Tailwind CSS! Keep an eye out for detail.

The body background color should be bg-lightGrayishBlue.
Adjusting the max-width of the grid section with Tailwind's width properties to decrease the size of the content with max-w-6xl. For example:<div class="md:col-span-10 md:grid md:grid-cols-3 md:gap-5 max-w-6xl"> This would help alleviate a lot of the padding/margin bottom concern.
Responsiveness on medium sized screens as well. On a tablet with a width of 768px, The boxes become too small and the text starts to extend out of their container. You could use Tailwind's responsiveness to differentiate between medium screens and large screens. For example: <div class="md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-5">

Hope this helps.

Marked as helpful

Quang• 350

@progressive-newbie263

Posted about 1 month ago

thanks for the advice madam@petrihcour

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