Skip to content
Submitted over 1 year ago

NFT Preview-card Solution

accessibility
Arhne•80
@Arhne
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello there, this is my solution to [NFT preview-card challenge]. Though I was able to accomplish the goals/objectives of this project, but I am unsure if I used the best coding practice. Hence, I would love the pros in the house to look through my code and make corrections if possible.

The things I observed that didn't go well with me: Therefore, these are the most pressing ones that I need immediate guidance on.

  1. When testing the responsiveness of my webpage, I noticed that when I choose the iphone SE and the rest of the other layouts, I couldn't see my webpage in it's entirety. Also, it didn't allow me scroll up and down. but when I switched to the responsive dimension where I expand and reduce the screen size, everything worked great.

Please can anyone tell me why this is happening? Patiently waiting for any feedback. Thankyou.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,810
    @danielmrz-dev

    Hello, @Arhne!

    Your project looks great!

    I hava e a few suggestions for you to improve it:

    • Change your body background-color to #0D1A2D. Doing that, you don't need to give your main div the same background.

    • I don't know if those classes you used are bootstrap or tailwind, but they are somehow preventing your card from being placed in the middle of the page. Try that instead:

    body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    I hope it helps!

    Other than those little details, you did a great job!

    Marked as helpful

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