Submitted almost 3 years ago

Nft Preview Card Component

accessibility

Daud Ismail Olakunle•20

@Eminentdio

A solution to the NFT preview card component challenge

Preview Code

Solution retrospective

My problem in coding lies with rendering my webpage appropriately in mobile view. Is there anything I need to know specifically to solve that?

I have always been having a kind of feeling of not having enough knowledge of any language before embarking on another one even if I can answer or practice any damn concept on it. Please is there a cure to this kind of syndrome?

Please, don't forget to criticize this project as well. The last one helped me to improve on some things like designing for Screen Readers.

Thanks!!

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello Daud Ismail, congratulations for your new solution!

🎨 Here’s some tips to improve your component design:

Make the shadow smoother reducing its opacity, see a good value for this shadow: box-shadow: 9px 4px 9px 4px rgb(0 0 0 / 4%);

To improve the solution responsiveness, make a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.
```
@media (max-width: 350px) {
.details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    border-bottom: 2px solid hsl(215, 32%, 27%);
    flex-direction: column;
}
}
```
✌️ I hope this helps you and happy coding!
Marked as helpful
Sankalpa Sarkar•520
@IllusiveCoder1101
Posted almost 3 years ago
Congrats on completing the challenge, about the mobile display issue, I think you should look into css media queries which is responsible for display on different screen sizes. Keep up the great work!!!!
Marked as helpful
Talha Khalid•200
@talha-007
Posted almost 3 years ago
Use divs and h1 tags only instead of span. you can use a div to overlay on the image which shows that eye icon. give it styling of hidden and when you hover give it a display. and you'll learn by the time don't worry it's good.
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