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 Preview Card Using Flexbox & TailwindCSS

@30vam

Desktop design screenshot for the Product preview card component 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?

It took me longer than I expected, I had most of it down in the first 30 minutes but at first I had trouble with the desktop version. I hope it makes good practice.

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

I had trouble with using the tag and more importantly the desktop version of the page, because the below the image didn't stretch to fill the entire card's height. I It took me longer than needed but it was because I needed to give the card an exact height for the section to stretch.

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

I wish there was a way to make section stretch besides giving it a specefic pixel height in pixels on medium+ breakpoint. Also if you increase the browser width, the photo will zoom in instead of scaling to become bigger, but that wasn't what I intended.

Community feedback

aapa1993 80

@aapa1993

Posted

I'm really proud of myself cause I've created a responsive design just using Tailwind

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