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

Media Query, Flex, Grid

@hyxenon

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


  1. Changing the mobile image product to desktop image.
  2. Setting the source image
  3. How do I change the mobile image product to Desktop image product?

Community feedback

@Anubhav-Ray

Posted

Hi @hyxenon. Congrats on Completing the Challenge.

You can use picture tag for setting two different images.

To make your webpage accessible you should use atleast one main tag to cover your entire html after body tag and should use semantic html

Marked as helpful

0

@hyxenon

Posted

@Anubhav-Ray I tried using picture tag element but the picture doesn't show up in React. I already change the srcset attribute to srcSet

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