Skip to content
Submitted almost 2 years ago

Product Preview Card - CSS

teddy-wests1de•260
@teddy-wests1de
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

Hi,

Does anyone have any insight into how I get the bottom border of the image lined up with the container when in desktop mode? I've been struggling with this, setting padding and margins throughout the whole thing. Thanks in advance for any assistance.

Community feedback

  • taavi80•370
    @taavi80Posted almost 2 years ago

    Hi,

    The most commonly used solution is to change the display property of the <img> tag from default ‘inline‘ value to ‘block‘ using display : block property.

    Marked as helpful
    0
  • Alex•110
    @aadler91Posted almost 2 years ago

    Hi,

    your solution looks very good :-)

    I had this problem just a couple of hours ago, as I did this challenge. I added the following css to the image: width: 100%; height: 100%; object-fit: cover;

    Than the image covers the entire box without getting distorted. I found this resource helpful in understanding that principle: https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image

    Hope this will help you!

    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