Hey, if your review my solution please leave any comments you have.
There is one thing I coudn't figure out, the product image has a size of 332 X 332 px but the div containing it has a height of 336px so there is some unnessary gap below the image. It isn't visible but when you hover over the image and see the overlay effect you can see the gap below the image. There is no extra padding or margin in the element so, I can't understand why that is happning. If someone could help me with that, it would be great help.
Thank you.
@tarek-mo
Posted
To remove that space under your image use display: block on your image tag, the reason behind this issue is that images are treated as text so the bottom is to accommodate for those pesky: "p,q,y,g,j" letters.
@purnimakumarr
Posted
Hi Tarek, Made the change and it works just fine now. Thanks!
@tarek-mo
Posted
@purnimakumarr anytime
@afaiz-space
Posted
Hey @purnimakumarr, height:100vh replace with min-height: 100vh; of the body element.
@purnimakumarr
Posted
Hi Faizan, thanks for noticing. Changed it.
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
