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

Card de Produto

@gabriel-rocha-pimentel

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

@Mr-Funderburk

Posted

One thing I will point out is how you placed the card. You used a flexbox for the #card-of-product with the justify-content set to center (which is great) but then you added a bunch of padding (360px on all sides) and a width (1440px). This causes the screen to scroll (even on my fairly large display). You can remove the padding and the width and the flexbox will automatically horizontally center the card. You can also remove the margin: 0 auto since this is accomplished by the flexbox. For the vertical centering, if you add a height of 100vh (or 100% of the viewport height), it will center it vertically. Of course, this would cause other items to shift if you had them since this box now occupies the entire height of the viewport. Something to keep in mind!

Otherwise, nice work!

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