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 solution

@Rapbit27

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 challenges did you encounter, and how did you overcome them?

Changing the pictures when the view changed was quite difficult. The second thing was fitting the picture to full height of the card in desktop view.

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

I would like help on the above mentioned problem. Changing the pictures when in different views and also with sizing them accordingly. Thanks in advance!!

Community feedback

a-yemisi 130

@a-yemisi

Posted

For the images, there were two images sent for the challenge, you could use media query. For the smaller screen size, ask it to use the mobile image, for larger, use desktop. You can use CSS to make to add an image to an HTML page, look up how that is done.

Asides from that well done.

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