Skip to content
Submitted 3 months ago

Product Card Challenge with a mobile-first approach

Rui-Martins23•170
@Rui-Martins23
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

What are you most proud of, and what would you do differently next time?

Proud to have been able to succeed using a mobile-first approach, as it was the my first challenge of this kind.

What challenges did you encounter, and how did you overcome them?

Placing and styling the image correctly inside the container was one of the main challenges.

What specific areas of your project would you like help with?

How would you make the transition of the mobile-image for the desktop-image? I placed both on the HTML structure and then used "display: none" on the media queries in order to hide them... but it didn't feel the best way to do this.

Community feedback

  • Laura Nguyen•130
    @laura-nguyenPosted 3 months ago

    Hi! Great job with the styling. For the desktop image to fit in the container, you can do object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit. After that, you can adjust the width of the card/component to make sure the image is fully displayed.

    Marked as helpful
    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