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

flexbox, sass technology.

YOPA SEREINAโ€ข 100

@BRENHINES

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

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Yopa, congratulations for your solution!

I just checked your solutions live site and code and I've some tips for you:

1.You've done the image import using background-image in this case is better you use <img> or <picture> since this image is something import as a product and using background-image isn't a SEO best practice since is harder to find in the css, in the html will be better ever since there's the alt for the image description.

2.Your image a little too big in the mobile version, this is due the height: 100%; since you've used background-image to import is hard to manage it, my advice again is to import it in mobile.

3.The paragraph font-weight is a little bit to much bold, try a value like font-weight: 300 or 400 (see the file styleguide.md for the exact size).

Hope it helps and happy coding!

Marked as helpful

0

YOPA SEREINAโ€ข 100

@BRENHINES

Posted

@correlucas Thanks you for your comment, it's very helpful. But I wanted to know; since the both images are different when we are on mobile and when we are on desktop , How can i make to swapit when we are going on the other device.

0
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

@BRENHINES hello Yopa, unfortunately now I'm in my phone and I cannot give you an answer in depth, but as soon I get my PC I can answer you, meanwhile you can check this guide that explain the use of this tag and how it works, https://www.w3schools.com/tags/tag_picture.asp

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