NFT Preview Card Component using CSS | HTML

Community feedback

• 

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  Hello Halibal! Nice job completing the challenge, love that you added a different nft :) Anyways about your questions,

  • remove width: 100% and add padding: 0 1rem to your body tag
  • make a media query where you make the font sizes smaller and that should make your design look a lot better in smaller screens

  I don't really recommend you adding width property on body tag, just add height or min-height and only add width when you need to on containers inside body. That's it for my feedback, happy coding as always!

  Marked as helpful

  1

  ---

  

  Halibal•250

  @halibalPosted over 2 years ago

  @pyaetheiN Hi Ricky,

  Thank you so much! :))

  I started another challenge and tried to implement your tips about both media query and height, yet still had to use the width property to fit it inside the div properly (with bootstrap "w-100")

  But still there is the question remains that on mobile version, the hover state where the nft image gets transparent etc overflows to the below divs. I couldn't figure a way out of it.

  Thanks again and happy coding, too!

  1

  

  Ricky•470

  @pyaetheiNPosted over 2 years ago

  @halibal I suggest you take a look at my solution (https://github.com/pyaetheiN/NFT-preview-card-component) copy paste the link inside the brackets into your browser.

  • I created a div for the overlay and to make it work, inset: 0; is crucial because what it does is it fills up all the available space inside a container
  • for more information about inset css property (https://developer.mozilla.org/en-US/docs/Web/CSS/inset)

  The reason why your overlay hover effect isn't working is because you added a specific height height: 28rem so it's stuck at 28rem even in mobile screens. My method avoids using height so it solves the problem you're having.

  0