Skip to content
Submitted 12 months ago

Product Preview Card HTML CSS

Adrian Albino•100
@adrianalbino
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)
Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Ian Parker•200
    @i-prkr

    Thanks for the solution, and the typography looks great and the html looks very clean. To help with the responsive design try using the <picture> element, and swapping out the mobile image with the desktop image using <source>. Applying block-size: auto should also help the image maintain its correct sizing. To help with the responsive design try experimenting with the clamp() function for font-size, defining it in the html element in CSS. The web.dev link for responsive design given in the learning path had great explanations of these.

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