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

Toni 420

@ToenSh

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


Hi, this is one of my first tries at responsive design, would love to get some feedback on the code and more specifically if there is a way to perfectly align the main card vertically and horizontally on the page without having to play with margins to get something close enough to that. Thank you!

Community feedback

Patrick 800

@PPechmann

Posted

Hey Toni!

Nice job on the challenge, congrats!

Regarding centering the card, there are various ways to approach it.

One of them is with flexbox. Just give the card container (in this case the body), a display: flex and then you will be able to "align-items: center" and "justify-content: center". In this case you will have to give the body a height, I suggest of 100vh, which will perfectly center the card on the page.

I recommend playing around with the browsers dev tools to try it out.

Hope it helps and feel free to let me know if you have any questions!

Happy Coding :)

Patrick

Marked as helpful

0

Toni 420

@ToenSh

Posted

@PPechmann Thanks a lot, tried it with dev tools and it actually worked!

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