NFT Preview Card w/ react-create-app, mobile-first and sass/scss

Community feedback

• 

  Jason Heys•175

  @heyitsganyPosted almost 3 years ago

  This looks good, you've gotten pretty close to the design, nice work!

  A couple of things to look at:

  • Your active state on the image (the colour overlay and eye icon) is a little larger than the image itself, so you get an odd extra bit at the bottom of the image when you hover.
  • You want to change the attribution div to a footer element instead (just to keep it semantically correct).
  • The height of the card could be increased slightly to better match the design.

  Also, the solution report is stating that you need to include a h1 element, although looking at your markup I can see it's there. I'm not sure if making it aria-hidden has caused this issue?

  Marked as helpful

  0

  ---

  

  Yuko Horita•645

  @Sloth247Posted almost 3 years ago

  @heyitsgany Hi Jason, thanks for your feedback! I have fixed the pointers other than first one - I cannot find the solution, so I will ask in #help of the community. h1 element had to be .sr-only - screen reader only text, so I fixed.

  0

  

  Jason Heys•175

  @heyitsganyPosted almost 3 years ago

  @Sloth247 so, to solve the problem with the overlay having the extra space at the bottom; make sure you give your img element a display: block.

  It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.

  Marked as helpful

  1

  

  Yuko Horita•645

  @Sloth247Posted almost 3 years ago

  @heyitsgany Wow, that fixed!! Thank you very much and I keep in mind it in the future 👩‍🦰

  0