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

@KingLyrics

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


I still need some help with the media query, but other than that an excellent challenge that I have successfully completed

Community feedback

@betaluis

Posted

Nice job! Yeah, you'll want to include both images in your html (the mobile version and the desktop version) then display one and hide the other based on the screen size. Another thing, don't forget to change the border radius in your query to match the design given. Few other things like padding around the card and the alignment of the button in mobile, but the more you practice the more easier that'll get. Congrats on completing the challenge.

Marked as helpful

1

@KingLyrics

Posted

@betaluis Thank you so much! Will make the changes once i get the chance!

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