Skip to content
Submitted about 2 years ago

NFT Card made with flexbox layout and media queries

Adrian•270
@EidrianMax
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Simple card that i made with flexbox and also i use media queries for that the designs become adaptable.

I use flexbox because i use gap instead of margin to separate elements.

Some feedback and advice are welcome.

Community feedback

  • Fancy•320
    @maciejkrol18Posted about 2 years ago

    1. I think the card gets slightly too small on lower screen sizes.

    2. You've done a good job with applying aria-hidden to images that do not need to be read by assistive technology out loud. However, your project still lacks basic accessibility. Remember to use semantic HTML and change the div with the class of card to a main tag - Frontend Mentor's accessibility report points this issue out.

    0
    Adrian•270
    @EidrianMaxPosted about 2 years ago

    Hello @FancyBaguette thank you for your feedback.

    1. I understand the card may be a little bit small in lower screen size.
    2. In regarding with accessibility problems i think isn't necessary for this exercise because the component doesn't need a main tag or h1 tag
    0

Please log in to post a comment

Log in with GitHub

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