CSS grid

Community feedback

• 

  Haico Paulussen•170

  @Haico-PaulussenPosted almost 3 years ago

  Hey Nick,

  First off, great solution! I see you used CSS Grid, I'm a big fan of that.

  There are some minor fixes possible to take it to the next level:

  • Even though you use the grid-gap correctly there still are some inconsistencies in your margins. Try to set the margin on the p to 0. This way the grid only uses the gap you set on the grid.

  • Your h1 is a little bit off from the design. You could fix this to make it even more alike!

  Hope this helps and good luck with your next challenges!

  1
• 

  Mark Teekman•365

  @markteekmanPosted almost 3 years ago

  Hi Nick,

  Great first solution! Haico has already made some nice additions. Things I could think of (I took some of these from my comment at Haico's solution):

  • When viewing the component on a small screen size the card overflows the viewport. This is because you've set a fixed width: 302px on the #card element. Try to avoid setting it explicitly as much as possible. Setting max-width: 302px solves this.
  • Consider using classes instead of id's to style your HTML. It's lower in CSS specificity and a better practice for re-usability.
  • 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 for accessibility purposes.
  • Your attribution links have a color contrast ratio of 1.88. The minimum contrast ratio is 4.51, a nice one would be a ratio of 6.0. You could achieve this by using a white color and an underline for example.
  • You can add cursor: pointer to your .overlay:hover class to add that extra level of interaction taken from the design :)

  Keep up the great work and happy coding!

  0