Design comparison
Solution retrospective
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
- @petrihcourPosted 3 months 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 helpful1 - The body background color should be
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