Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Four Card Feature Section w/ Tailwind CSS

P
Vanessa 150

@petrihcour

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I was able to apply the Tailwind CSS classes on mobile and desktop utilizing flex fairly quickly. I was worried about the desktop version and the way that the boxes are laid out, but I ended up wrapping the middle two boxes in a div and applying flex to that, and it worked out perfectly. It took me 1 hour less than what I had expected, so I'm happy I'm getting the hang of this.

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

My main challenge was ensuring the box sizes on desktop and tablet didn't drastically change sizes. I ended up utilizing Tailwind CSS's min-width and max-width properties to ensure the boxes are the same size.

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

Any feedback would be great!

Community feedback

P
KMS56135 120

@KMS56135

Posted

Good job

0

Please log in to post a comment

Log in with GitHub
Discord logo

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