Skip to content
Submitted almost 2 years ago

Product preview card component

Okobi Eigbe•20
@okobi45
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

Your review is highly appreciated. thanks

Community feedback

  • Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    Hi Okobi!

    With the body element having a fixed width (of 1440px), it prevents the page from responding properly when it is resized and also prevents the card from being centered (horizontally) unless the window size is exactly 1440px.

    I would recommend removing the width: 1440px from the <body> element, in order to horizontally center the card. Within your media query for mobile, I would also recommend removing the fixed width (width: 375px) so that the card centers itself horizontally.

    I like your use of Flexbox here! I'm pretty new to using it, so it is always good to see how others approach it!

    Marked as helpful
    1
    Okobi Eigbe•20
    @okobi45Posted almost 2 years ago

    Hi Ryan,

    Thanks a lot for the review. I've removed the fixed width for the desktop and mobile. The card centers perfectly now.

    0
    Ryan Hemrick•290
    @Ryan-HemrickPosted almost 2 years ago

    @okobi45 Awesome!

    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