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 (mobile first)

@PierreFrs

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 everyone !

For my first post on frontend mentor I'd really like some feedback on this task about the responsive side of the project. Also, I wasn't able to center the card vertically (is flexbox enough ?).

Thanks, Pierre

Community feedback

relizard 80

@RestlessLizard

Posted

Hi Pierre, good job!

The responsiveness was done as requested, but I feel like the mobile version could get better with some margins on the sides and top. Also, on the desktop version, the image seems to be a bit stretched. Other than that the responsiveness is good.

You can find a lot of resources on how to center a div vertically, here is a good one in my opinion: https://css-tricks.com/centering-css-complete-guide/

Other small notes: pay closer attention to the fonts, in your solution they are a bit bigger than in the design (and also check line-height).

Great job overall, wish you the best on your journey, don't let anyone discourage you!

0

@PierreFrs

Posted

@RestlessLizard Oh man I did not expect such a quick and complete answer, thank you very much. I'll correct that right away !

0

@PierreFrs

Posted

@RestlessLizard It is done. Thanks again

0
relizard 80

@RestlessLizard

Posted

@PierreFrs Great job, keep it up :)

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