NFT preview card component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Frederick, I also completed this challenge, and the only main difference is I didn't add an <a> tag for the image. I tried it just now to see whether it would have the same effect as yours, and nothing happened, so I think there's something going on in your code. I'm guessing it has to do with your <a> tag wrapping around your overlay div, and it might be because your anchor tag is wrapping around a position: absolute element. That extra space could be due to line height, since <a> tags are inline elements typically; I tried changing the line height to 1 via inspector, and that removed 2px, so I think that is the culprit due it its properties. Try wrapping the <a> tag around the <img> tag instead, and have the overlay placed after instead of before:

  <div class="img-section">
     <a href="#">
       <img src="./images/image-equilibrium.jpg" alt="Header image" class="header-img" >
     </a>
     <div class="overlay" >
       <img src="./images/icon-view.svg" alt="View icon" class="view-more">
     </div>
  </div>
  
  

  Here's my solution for your reference: https://www.frontendmentor.io/solutions/reponsive-nft-preview-component-W2gWx-dAyA

  Good luck!

  1
• 

  Tomisin•260

  @TeNeBiT-engPosted over 2 years ago

  Hello Frederick, what you might wanna do is change the height of the "overlay" div to 98.7% or 98.8%, or you use 302px. Ciao.

  0