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-main

@Sadikibenda

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?

I am proud to work on my first responsive project. despite all the struggle I will keep going

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

working on mobile size was a bit challenging

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

I would like to get help on how to set the mobile image given. how do you insert into @media querry ?

Community feedback

ijohnst 230

@ijohnst

Posted

This is a great start for a first project. The way I got it to work using two different images (desktop and mobile) is by using a <picture> element and a <source> element with an srcset attribute that points to the desktop image and a media attribute that points to your media query.

Read more about it on MDN

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