Submitted about 2 years ago

NFT-Preview-Card-Component

allys• 90

@allyskorsah

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

For this project I found it difficult giving the cube image its hover effect. What is the best practice if you want to have an effect of that sort.

I wanted the card to be in the center of the page without having a scroll bar, I also had some difficulty with doing so. Apart from using the width and margin properties how else can you center your container in the page, make it large enough to fit all content and small enough that the page doesn't need a scrollbar?

Community feedback

faizan• 2,420

@afaiz-space

Posted about 2 years ago

Hey @allyskorsah, congratulation on completing the challenges. remove height of card class.

allys• 90

@allyskorsah

Posted about 2 years ago

Hello @afaiz-space, thank you for your feedback. I appreciate it. I did take out the height property before but since I don't want my page to have a scroll bar I put it back.

Is there another way where instead of height I use a different property and don't get the scrollbar on the page?

faizan• 2,420

@afaiz-space

Posted about 2 years ago

@allyskorsah use min-height:100vh.

allys• 90

@allyskorsah

Posted about 2 years ago

@afaiz-space I'll try that. Thank you.

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