Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT Preview Card

Shawnā€¢ 20

@skscjoyner

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had fun with this project. I did find the overlay a little challenging...and a learning experience. Please offer any related feedback for improvement.

Community feedback

@VCarames

Posted

Congrats on completing this challenge!

To perfectly center your content, add the following to your Body Element; min-height: 100vh, display: flex, justify-content: center, align-items: center, and flex-direction: column`.

Regarding what was mentioned in the previous comment, just change your Card Class width to max-width. In the same class, remove the margin; not needed.

Marked as helpful

1

Shawnā€¢ 20

@skscjoyner

Posted

@vcarames Thank you so much for your suggestions! It looks and responds better now. I couldn't figure out the responsiveness part, but you made it clear.

0
Liam Rā€¢ 425

@Cooly-o-Cats

Posted

This is great! It seems that the card doesn't shrink on mobile. Anything under 375px. It would be great if you solved this, probably easiest using media queries.

1

Shawnā€¢ 20

@skscjoyner

Posted

@Cooly-o-Cats Thanks! I got it figured out. I had to change the width property.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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