Skip to content
Submitted about 2 years ago

NFT preview card using Bootstrap/SCSS

ClaireliseDev•120
@ClaireLise-dev
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

Hello! First time using Bootstrap for a project, it's great! I have an issue with the picture active state, I couldn't make it fit perfectly the card-img-top, any advice is very welcome! Also, I couldn't change the sizes of width and height which are 25/50/75/100 with Bootstrap, not precise enought but I couldn't find the name of the variable in the bootstrap scss to change it, again advices are welcome!

Community feedback

  • Amal Karim ✅•1,290
    @amalkarimPosted about 2 years ago

    Hi, Claire 👋

    It's interesting to see someone using Bootstrap to solve the challenge in here. I've never done that myself.

    To make the card-overlay fit card-img-top, do these two step:

    1. Give the div that contain card-overlay and card-img-top (i.e. their parent div) this: position: relative;
    2. Change height of card-overlay from 392px to 100%;

    Hope this helps

    Marked as helpful
    0
    ClaireliseDev•120
    @ClaireLise-devPosted about 2 years ago

    @amalkarim Thanks a lot Amal! It works out perfectly!! I still need to work on position relative/absolute ;-)

    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