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 using CSS flexbox and position property

Assem 20

@assem-frontdev

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


  • I find it quite difficult at the beginning to center the card component both horizontally and vertically. How do you manage to center the card component?
  • I think in tablet view the design is not quite good and needs to be improved but for me, I just followed the design structure in the challenge desktop and mobile.
  • I would be happy to review my code and suggest any improvements.

Community feedback

Illyaas 700

@Illyaas4Show

Posted

This is a very nice solution, almost identical, Well done!

  • I see that you used position: absolute; to center the div, I think you should use flex-box as it is a lot easier and works a lot better. Like this:
body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}
  • I also thought the tablet mode could be better. I usually just make it better as a sense of achievement, like doing extra, if you know what I mean.

I hope this helped Happy coding

Marked as helpful

0

Assem 20

@assem-frontdev

Posted

@Illyaas4Show Thanks a lot for your feedback, bro I will try this out and I will be working on the tablet mode also.

0
Illyaas 700

@Illyaas4Show

Posted

@assem-frontdev No problem! Happy to help.

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