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

componente de cartão produto perfume

@Felipemendes097

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


Olá novamente, esta é o meu segundo desafio , sei que ainda tenho que melhorar bastante por isso peço a ajuda de vocês para um feedback, desde já agradeço!!

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hi Felipe Mendes, congrats on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

The best to way to have this image and every image responsive and easy to work, its by creating a general property adding display: block and max-width: 100% to make it fits the size of the container the image is inside and also respect the container width while scaling, add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

✌️ I hope this helps you and happy coding!

Marked as helpful

0

@Felipemendes097

Posted

@correlucas Obrigado pelo seu feedback , já anotei aqui tmj!

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