3-column preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @hemzi 👋, good job on completing this challenge! 🎉

  Here are some suggestions you might consider:

  Regarding your first question:

  • Use min-height: 100vh to body selector, with this property you set a height and let the element grow even more if necessary.

  Here are some other suggestions:

  • The Learn More elements should be anchor tags and not buttons because they redirect to another part of the page.
  • Use margin: 0.938rem or margin: 15px in the .cards selector so that it has some space when viewed on mobile devices.
  • In other solutions, If you intend to use buttons and you have 'flat edges", add padding and increase the border-radius.
  • Instead of using pixels in font size on the body element, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  1

  ---

  

  hemzi•30

  @hemziPosted about 2 years ago

  @MelvinAguilar thank you for those fixes!

  1

  

  hemzi•30

  @hemziPosted about 2 years ago

  @MelvinAguilar do you have a reference for determining when to use anchors vs. buttons?

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  @hemzi Hi!

  An anchor tag (<a>) should be attached if the element redirects to a section of the same page or an external one.

  A button can be used to perform the functionality of an interactive element, such as displaying a modal, sending information, changing or calculating data, etc.

  More info: Button versus Link

  0