Skip to content
Submitted 6 months ago

Product Preview Card | Pure HTML & CSS

Marzia Jalili•7,390
@MarziaJalili
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?

I have starded taking the learning paths. I've finished the first one and started the second one😎.

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

I am struggling with the clamp() function. I have the design set for desktop and mobile but the font size doesn't fit well on tablate.

Please help me out🫡.

Code

Please log in to post a comment

Log in

Community feedback

  • Priyavrat Chaudhary•110
    @priyavrat8065

    for clamp function you can use this website - https://royalfig.github.io/fluid-typography-calculator/

    This is a clamp calculator. All you need to set the max min viewport with max and min font.

    Suppose if you want the font to be response for mobile and tablet and its size should vary between 1.5rem to 2rem then set min viewport lets say 320px and max viewport 960px, min font font 1.5 and max font 2rem then calmp calculator will do the job for you.

    for more understanding of how clamp function works watch this video - https://youtu.be/U9VF-4euyRo?si=gdogxTZ6DISwpuuk&t=493

    Marked as helpful
  • Opeyemi Eniola•410
    @Enisco29

    This is literally the best I've seen.

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