Skip to content
Submitted 9 months ago

Responsive Review Card

Rod•90
@RodRyan19
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 did you find difficult while building the project? -The one thing I got stuck on is in image since the image wont fit properly but I found out that i just need to add height:100% instead of the usually I used width. stupid me! Which areas of your code are you unsure of? -Actually, I need some feedback on what others can see that is not right and should practice the correct one Do you have any questions about best practices? -Nope but please provide some feedback. thank you!

Community feedback

  • Venus•1,640
    @VenusYPosted 9 months ago

    Well done on completing this challenge! You did a really good job making it responsive and also making it resemble the design.

    I noticed that the image becomes distorted and stretched when you decrease the width of the viewport.

    You can fix this by using object-fit:

    .left-product {
  object-fit: cover;
}

    This property allows the image to fill the space but still maintain its aspect ratio.

    You can also use this property with object-position to adjust the alignment of the image.

    You can read more about these two properties here: object-fit, object-position

    Hope this was helpful! :)

    Marked as helpful
    1
    Rod•90
    @RodRyan19Posted 9 months ago

    This was very helpful and thank you! @VenusY

    0
    Venus•1,640
    @VenusYPosted 9 months ago

    @RodRyan19 No worries! I'm glad I was able to assist you.

    I would really appreciate if you marked my comment 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