NFT Preview card component

Community feedback

• 

  Rodrigo Vergara•680

  @UnTalPelucaPosted over 2 years ago

  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

  1

  ---

  

  Wasim•90

  @WasimAkramSPosted over 2 years ago

  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.

  0

  

  Rodrigo Vergara•680

  @UnTalPelucaPosted over 2 years ago

  @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

  1

  

  Wasim•90

  @WasimAkramSPosted over 2 years ago

  @UnTalPeluca Thank u. It is really helpful to me.

  0