@UnTalPeluca
Posted
Your solution is really good. I notice than when hover the image you can notice that it has an empty space at the bottom, you can fix it by adding
display:block
to the product image.
Keep up the good work, you'll do very well. You can contact me on discord if you need any help Peluca#7132
Marked as helpful
@WasimAkramS
Posted
Hi@UnTalPeluca That extra space problem got fixed really, as you said. Please explain the logic behind this. Initially I tried on this but I could not. But you exactly pointed out the solution. Please teach me.
@UnTalPeluca
Posted
@WasimAkramS I understand that this happens because img, being an inline element, is rendered as if it were text, and the text has a space below it for certain letters such as "g", "j". You can check it by giving the property "font-size: 0" or "line-height:0" to the image container, I prefer to use "display:block" in the images because it is what makes the most sense to me, we want the image behaves like a block. Always in my projects at the top of my css I write
img {
display: block;
}
Marked as helpful
@WasimAkramS
Posted
@UnTalPeluca Thank u. It is really helpful to me.
