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

challenge-One(F-M)

Saleh 150

@Abotreka00

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

romyanand 70

@romyanand

Posted

The desktop, design looks great and absolutely professional. Just a little thing to add in mobile design,

  1. When adding the perfume image, there are two images provided: one for desktop and one for mobile.
  2. You have already added the desktop image in your code, you can add the mobile.
  3. Add the breakpoint using media queries and toggle the display based on the screen width. All the best!👍
1

Saleh 150

@Abotreka00

Posted

@romyanand Thank you very much. I searched for a way to put more than one picture, and each picture has its own media by using a tag <picture>

0

@Morfeo1997

Posted

It's a really good solution, you're doing really well. but you have a little error on the "src" of the image. Try deleting the first "/" in src.

Something like this:

<img src="images/image-product-desktop.jpg">
1

Saleh 150

@Abotreka00

Posted

@Morfeo1997 Thank you very much, my brother. This is the solution. It really worked inside the visual studio, but on GitHub, no

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