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 component

@yerbaMatte

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


Hi, what do you think?

Community feedback

Joshua Mo 130

@joshua-mo-143

Posted

Hi there!

Don't forget to change your README.md at some point, it looks like you've just copy and pasted the template in. Also, adding an id to things will help to identify individual elements.

The image looks broken but I think someone else has already provided a solution to that.

0
Alejandro 80

@AlexKR7

Posted

You have a slight error in the image path so don’t appear.

the correct code:

<picture> <source media="(min-width: 616px)" srcset="images/image-product-desktop.jpg" /> <source srcset="images/image-product-mobile.jpg" /> <img class="perf-img" src="images/image-product-desktop.jpg" alt="a head carved out of wood" /> </picture>

The "/" before images is what makes your image not appear

0

@yerbaMatte

Posted

@AlexKR7 hi, i deleted forward slashes but still can't see pics :C

0
Alejandro 80

@AlexKR7

Posted

@yerbaMatte Try to replace the code I gave you, to me it has finally appeared

0
Jishan 290

@jish0101

Posted

Image isn't showing up.? And the card is a little taller.

0

@yerbaMatte

Posted

@jish0101 hi, yes i see that cards are a bit taller too, how did u get the proper height? i dont see any guidelines about height in style document.. i couldn't figure out what the proper dimensions are.. 🥲

0
Jishan 290

@jish0101

Posted

@yerbaMatte i guess it was 35.5rem width. check mine.

0

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