NFT Card with CSS Grid

Community feedback

• 

  Mark Teekman•365

  @markteekman

  Posted over 3 years ago

  Hey Haico,

  Great work once more on this challenge! You can definitely see your CSS Grid skills improve :) I like how you kept the HTML very minimal and used the power of Grid to handle the structure of the layout.

  Some small improvements:

  • On smaller screens (phone for example) the attribution footer lays over your card because you've used position: fixed. You could try something like a sticky footer solution, where it's still at the bottom on large screen sizes but stays below the main content on small screen sizes.
  • When viewing the component on a small screen size the card overflows the viewport. This is because you've set a fixed width: 375px on the main element. Try to avoid setting it explicitly as much as possible. Setting max-width: 375px solves this.
  • Try to include a CSS reset in your project, not including one can often lead to differences between browsers. A good example is trying to implement the sticky footer I mentioned. You can see in Firefox that the body has some margin which results in the footer overflowing the viewport because of the width: 100vw the footer has. There are many options, a simple one is all you need.
  • When using alt="" attributes on images, check whether is makes sense to put it there. For example, you have alt="image of Jules Wyvern" on the avatar, followed by the text 'Creation of Jules Wyvern'. A screen reader would now read 'image of Jules Wyvern Creation of Jules Wyvern'. So here, it's better to have an empty alt="" tag. If the avatar image wasn't accompanied by any text it would make sense to set the alt tag to describe it to the user.
  • Another accessibility concern is that your anchor links aren't distinguished in this component. 'Equilibrium #3429' and 'Jules Wyvern' are links, but this is not visually notable. Consider adding an underline to them.

  All in all, it's a great looking component!

  Happy coding :)

  22

  Marked as helpful
• 

  Mark Teekman•365

  @markteekman

  Posted over 3 years ago

  Haico, just figured I forgot one addition, you can add cursor: pointer to your .header:hover .view-container class to add that extra level of interaction taken from the design :)

  10