Skip to content
Submitted over 2 years ago

Responsive Product Preview Card

Warrick•20
@wozdog
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

All feedback welcome.

I had some trouble with the responsive images. You will see in the desktop screenshot the white space under the button. This is the image pushing down the grid. I tried adding the images in CSS using background images, but that came with its own complications. I'm keen to see how others have done it.

All in all, it was a very time-consuming process for something so simple. I'm looking forward to speeding up a bit with practice. Thank you for your time.

Community feedback

  • Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi, nice work with your solution!

    Here are my recomendations:

    • Add to the body min-height: 100vh, display: flex and align-items: center, for center your card.
    • The wite space under the button it's because the content has too much horizontal space and can't wrap. In the .content class, make the padding bigger (3rem) so the content fills the container vertically and it matches the design.

    Hope it was helpfull!

    0
    Warrick•20
    @wozdogPosted over 2 years ago

    @ferlagher Thank you so much for the feedback. I really appreciate your time and effort in helping me out. I'm new here so still figuring it all out but look forward to paying it forward sometime soon.

    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