Submitted almost 2 years ago

NFT preview card using Bootstrap/SCSS

ClaireliseDev• 120

@ClaireLise-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

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

@amalkarim

Posted almost 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:

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

Hope this helps

Marked as helpful

ClaireliseDev• 120

@ClaireLise-dev

Posted almost 2 years ago

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

Please log in to post a comment

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