Skip to content
Submitted over 1 year ago

Product Preview Card: CSS Grid and Flexbox

dominiquemc•90
@dominiquemc
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

Any feedback would be greatly appreciated. I would mainly love insight on why the image cuts off for 240x320 size.

Community feedback

  • Esther Rose•150
    @codarosePosted over 1 year ago

    Very nice solution! I like your use of the 'picture' element and your mobile-first implementation.

    I am not sure I am replicating your situation where the image is cut off at dimensions of 240 x 320, but given that these dimensions are closest to the portrait orientation, my best guess would be your use of the "object-fit: cover" styling on desktop, which will crop the image to allow it to fully 'cover' its container element.

    Awesome job again :)

    Marked as helpful
    1

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