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 card preview

Arun 90

@ninjabro

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


its my first project, please give critics and comments. thank you!

Community feedback

Hassia Issah 50,810

@Hassiai

Posted

replace <h3> with <p> to fix the accessibility issue. Replace the <h2> with <p> and give it a class for the styling and replace the <h1> in <div class="product__price"> with <h2>.

To center .container on the page remove margin:10% auto from the container and add min-height: 100vh to the body.

To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

0

Arun 90

@ninjabro

Posted

@Hassiai hi,

i changed them.

min height to container breaking the card and resulted increase in card size .

you were helpful, thank you

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