Skip to content
Submitted over 2 years ago

Product preview card component using CSS flexbox and position property

Assem•20
@assem-frontdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @Illyaas4ShowPosted over 2 years ago

    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-frontdevPosted over 2 years ago

    @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
    @Illyaas4ShowPosted over 2 years ago

    @assem-frontdev No problem! Happy to help.

    0

Please log in to post a comment

Log in with GitHub

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