Skip to content
Submitted almost 3 years ago

Responsive product card (CSS GRID + SASS/SCSS)

sass/scss, node
Cristina Kelly•140
@cristinakellyt
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys! This is my first challenge in the platform and I am very excited! I spent sometime have fun doing this one, besides it is simple, I learned a lot.

Feel free to comment anything, I will really appreciate!

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,200
    @correlucas

    👾Hello Cristina, congratulations for your solution!

    Your solution seems really great, I can see that you've paid attention to the details, the media query works really good. There's only some details you can consider fixing.

    Here's my tips:

    1.You've added some hover effect that makes the container image grows a little bit and this makes the image pop out from the container, to keep the image inside the container limits use overflow: hidden;.

    2.Here the problem is the opposite of the first tip, you've added overflow: hidden; to the class called card__image note that when the container starts to contract, the property overflow makes the text information like the button and price get cropped, if you've add overflow: hidden to manage the image borders, you can just use border-radius for the left top border image borders.

    The rest is all amazing, your container is super fluid and responsive.

    Congrats!

    I hope it helps you Cristina, happy coding!

    Marked as helpful

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