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

using flexbox

i_d_s_l 270

@ilvdrskn

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


The project is not over yet! Only the PC version has been made, I will finalize the mobile one. I rolled it out earlier in order to see how it will be displayed in the solution on the fm website

Community feedback

Hassia Issah 50,830

@Hassiai

Posted

add the alt attribute alt=" " to all the img tags and replace or wrap <div class="attribution"> with the <footer> to fix the accessibility. the value the alt attribute is the description of the image.

For a responsive content which won't require a media query for this challenge, replace the percentage width value of .card-holder. with a fixed max-width value . e.g max-width: 400px.

To center .cardholder on the page using flexbox, replace the height of the main with min-height: 100vh , there is no need for a max-width value in the main, give it a width of 100%.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

1

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