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

Product preview card (HTML & CSS)

@Hamsolovski

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?

done in about 1h30, which was my initial estimation.

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

Automatic scaling of fonts using clamp() : didn't know about this !

Also handling the image on the desktop version was quite tricky : had to use a grid to do this, but would like to know another way to do it.

Community feedback

@rohankhan5655

Posted

  • For automatic font scaling, I’ve learned to use the clamp() function, which has streamlined the process and improved responsiveness.
  • Regarding image layout on the desktop version, while using a grid was effective, I am interested in other techniques that might offer more flexibility or efficiency.

Best Solution: Using the clamp() function is a robust solution for responsive typography. For example, font-size: clamp(1rem, 2vw, 2rem); automatically scales the font size between a minimum of 1rem and a maximum of 2rem, with 2vw as the preferred size.

Best Solution: While using a grid is effective for many layouts, other techniques such as Flexbox or CSS Grid with media queries can also be used. For instance, Flexbox allows for responsive image alignment and distribution, while CSS Grid provides more control over complex layouts. Using object-fit properties like object-fit: cover; can also ensure images scale well within their containers.

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