3 columns challenger solution

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋 Hi Rebeitte!

  🎉 Congratulations on finishing this challenge! Regarding your question, for font-size, it is recommended to use rem or sometimes em unit instead of px or %. Also, you don't need to think about how much 1rem is in px. You might find it helpful if you don't think in terms of px at all.

  Also, changing the root font-size can have a lot of negative impacts with almost no benefit. Read what an accessibility expert (Grace Snow) has said about it.

  For the feedback:

  • Accessibility
    • Don't uppercase the text manually, the screen reader will spell it letter by letter. Use CSS instead.
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • The Learn more button should be a link, since they will navigate the user to the different web page, if this is a real website.
  • Best Practice (Recommended)
    • You can import two font families at once.
  • Styling
    • Setting the box-sizing: border-box; on the html element doesn't make all the elements box-sizing: border-box;. You can make all the elements inherit the box-sizing value from the html by doing the following.

  html {
      box-sizing: border-box;
  }
  
  *,
  *::after,
  *::before {
    box-sizing: inherit;
  }
  

  • To make the cards perfectly in the middle of the page, you can make the body element as a flex container.

  /**
   * 1. Make the direct child element (main)
   *     vertically center and allow the body
   *     element to grow if needed
   */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* 1 */
  }
  

  That's it! Hopefully, this is helpful!

  11

  Marked as helpful
• 

  DanielK•440

  @DanK1368

  Posted over 3 years ago

  Hey..i usually apply a font size of 62.5% for the whole project. It's just a bit easier to calculate as 1rem will equal to 10px. Without setting this percentage it will be 1rem=16px.

  You generally want to avoid using px for setting widths and heights, as it will not be responsive to the size of the screen. Unless you really want it to be fixed then you can use px. It depends on what you want to achieve. :)

  00