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

Card component using nextjs and tailwindcss.

Nate Poli 60

@njpoli

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


I used a lot of defined pixel-width elements to get this component to look correct. Is that bad practice? Should I be using percentage-based sizing if possible? I tried for a bit but this caused the component to grow and shrink in ways that made it look wrong without a defined width/height. I appreciate any and all feedback.

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Nice well done. You took the right approach, for this kind of things is best to define the width ad height with px, rem or em. I see a lot of people using % and like you said if not used the proper way, % can disrupt everything. I see you used rem to define the font size, so you did good.

You are in the right direction 👊😎

Btw next time you don't have to hide the image and show it with media query, you can use the <picture> element.

Marked as helpful

1

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