Skip to content
Submitted about 1 year ago

Card component using nextjs and tailwindcss.

Nate Poli•60
@njpoli
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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,680
    @hitmorecodePosted about 1 year ago

    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

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