Skip to content
Submitted over 1 year ago

Product Preview Card Using HTML and CSS

Taylor•90
@taylorkondrla
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 enjoyed doing this challenge. I cannot figure out how to get the tiny white line removed from underneath the photo on the left if anyone has any feedback that would be greatly appreciated!

Community feedback

  • August Duet•250
    @ajduetPosted over 1 year ago

    Great job. In regard to the little white space below your image, CSS can be a bit of a pain like that, but I was able to remove it by also setting the height property to 100%. I also noticed that your design isn't responsive to mobile screens. Have you checked out flexbox and grid to help create a responsive design?

    Marked as helpful
    0
  • Deivid Esteferson•230
    @deivid-esfPosted over 1 year ago

    Heyy, good job!!

    That line is there because you put a image inside a div, and at css you defined just the lenght (width) of image. You can solve this using: .img img{ height: 100%; }.

    Other way you can use to solve this is defined the size of a div and put the image as background, like this:

    <html>
<body>
<div class="banner"></div>
</body>
</html>

css:
.banner{
width: 100px;
height: 100px;
background-image: url('link-image');
}
    Marked as helpful
    0
  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hey there,

    congrats on completing the challenge successfully! Looks great.

    Regarding your issue about tiny white space. I know it is pretty annoying thing, but you can get rid of that by

    img { display: block }

    images are technically set to display: inline (like text) by default but behave like inline-block (meaning one can set width and height explicitly). You can see that text have usually some tiny white area below and above the letters. So this is where this behaviour comes from. By display: block, you can get rid of that.

    Additionally, you can use display:flex, flex-direction: column, to make the whole container responsive for the mobile or tablet layouts.

    Hope this was helpful!

    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