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

product-preview

@Mastermind390

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

P

@Islandstone89

Posted

Hello, good job on this challenge. Here are some suggestions.

HTML:

  • Your page needs a <main> element to wrap the main content of the page. You can change the div you have for the whole card to a main.

  • "PERFUME" should be written "Perfume", and then styled using CSS.

  • In this challenge we have to use one image for mobile, and another for desktop. This sounds a bit tricky, and I didn't know how to do it myself. Luckily, there's a <picture> element which makes it easy for us. Either way, you should definitely have only one card markup.

Here is more info on the picture tag

  • The "Add to cart" should be a link, not a button.

CSS:

  • On the body, use min-height instead of height.

  • Remove overflow: hidden

  • Remember, when using media queries, you don't have to add what has already been declared. You only need to write the properties that are different from what has already been declared.

Hope this helps :)

Marked as helpful

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