Skip to content
Submitted 6 months ago

Product Preview Card Component using Mobile-First-Approach

sass/scss
P
kephalosk•400
@kephalosk
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Tried Mobile-First-Approach for the first time.

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

Used clamp() the first time and it scaled strongly up with given default case clamp(1rem, 0.8rem + 1vw, 3rem);. I scaled it down to clamp(1rem, 0.5rem + 0.5vw, 3rem); to match the ux design.

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

n/a

Code

Please log in to post a comment

Log in

Community feedback

  • Fernando Batista•630
    @FernJBatista

    Really good solution! You have very well organized code.

    The only observation I've made is that you've put a header element inside the main for the card. I'm not entirely sure about this, but I believe it takes away from the semnatic system a bit. I might be mistaken, but overall it looks really good!

    Marked as helpful

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