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

Página responsiva usando HTML e CSS- Reponsive page using HTML and CSS

@nunes1886

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

Account Deleted

Hi

Congratulation on completing the challenge.

I will go over a few of the issues I have seen.

For your image you should have used the <picture> element. It takes multiple images and allows you to decide which one to use depending on the conditions you set such as screen size.

You do not need so many container elements, you should collapse .container, .card-field and .card into one container.

You do not need <br> in your <h1> heading, play around with the heading width to match it to the design and it is the same for the following text.

For the prices it is better to use <span> as it is an inline element so there is no need to make .price a flex container.

When you improve your solution you need to generate a new report otherwise it will still show the old warnings.

I hope this helps

Happy coding

Marked as helpful

1

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