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!
@ajduet
Posted
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
@deivid-esf
Posted
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
@visualdenniss
Posted
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
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
