Skip to content
Submitted over 1 year ago

NFT Preview Component | HTM & CSS Responsive Design

Cloud Custodian•80
@joeterlecki
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I continued with everything I learned up to this point from my previous feedback; however, there is one small prob I can't solve.

For some reason after setting a width and height to the parent container div and setting the image to fill, the header length is slightly longer than the width resulting in the overlay busting out of the parent div by ~5 pixels. If anyone can help me out with what's wrong with that, I would be grateful.

Also, all other feedback is welcomed.

Community feedback

  • London Joseph•140
    @London-JoePosted over 1 year ago

    I've gone through your code there are no issues, just change the height on your .card-header:hover::before, from 100% to height: calc(100% - 5px); .

    0
  • john•90
    @johnhaabPosted over 1 year ago

    Good job on completing this challenge, it looks great!

    As for your issue from looking at the inspect element, your parent div to the img has a total height of 309px, and your img has a total height of around 303. Try and locate the error by researching, removing styles and tweaking the styles.

    I managed to fix your issue by changing "height: 100%" to "height: 98%" inside your ".card-header:hover::before" class.

    Nonetheless great job.

    0
    Cloud Custodian•80
    @joeterleckiPosted over 1 year ago

    @johnhaab awesome and thanks. I tried by changing the the height and got the same result but felt like if the image has equal length and width l, it would fill the header contained appropriately.

    0
  • Atif Iqbal•3,200
    @atif-devPosted over 1 year ago

    Hi Cloud Custodian, congrats🎉 on completing the challenge. Better take care about following points.

    • For your issue just set height as height: 98%; in your .card-header:hover::before selector.
    • Further...When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.

    Hope you will find this Feedback Helpful.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

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