Skip to content
Submitted over 2 years ago

Product Preview Card

Ken Zimny•200
@K-Zimny
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

I wanted a fully responsive layout incase the height of the text blocks changed in the future (future proofing). However, the height of the img kept exceeding the height of the text content container. I wrote some JS to handle this by getting the size of the text content container and applying it to the image.

Did anyone else struggle with something similar?

Community feedback

  • Mudi•220
    @Mudi-IgbinobaPosted over 2 years ago

    Great work. Although I didn't have the same issues as you did, I suggest setting a height and width to your "product-image-container" and using a background image instead of a regular img tag. That's what worked for me.

    And also try adding a font family property to your button so that it matches the design.

    Marked as helpful
    0
    Ken Zimny•200
    @K-ZimnyPosted over 2 years ago

    @Mudi-Igbinoba I didnt even think about a background image. Ill give that a try. Thank you.

    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