Testimonials grid section solution

Community feedback

• 

  Arne•1,110

  @DudeldupsPosted over 1 year ago

  Hello! 👋

  Congratz for finishing the challenge! There are some things that you could take into account for your next approaches:

  • Do not declare font-sizes in px. Use rem or if you want it to scale according to the parent container, use em.

  https://www.freecodecamp.org/news/why-use-rem-to-set-font-size-in-css/

  • A website should only have one h1 element with the main title. I know that a component like this is not supposed to have an h1 but you could just leave it away in a challenge like this or visually hide it (and then start with an h2 for the name)

  • The grid does not have a padding, it touches the sides of the window right after the media query.

  • You are repeating yourself in your CSS to declare the colors. You could just give .Kira the color: xx (and not each text element). Or you can create helper-classes so you just have to write one CSS rule and give each element the designated class. For example:

  .text-black {
  color: black;
  }
  .bg-white {
  background-color: white;
  }
  

  and in your HTML:

  <div class="profile bg-white text-black">

  I know it's not a big repetition in this case, but just to let you know 🙂

  Marked as helpful

  1

  ---

  

  Unkookerinho•460

  @UnkookerinhoPosted over 1 year ago

  @Dudeldups How would you hide h1 element? Using diplay: none; or visibility: hidden; it says Page should contain a level-one heading

  0

  

  Arne•1,110

  @DudeldupsPosted over 1 year ago

  @Unkookerinho That's right, using display: none removes the element completely from being rendered. An element with visibility: hidden is being rendered, but it also takes up space just as if it was visible.

  You can use a .sr-only (screen-reader only) class for such cases. The element is accessible for screen readers but it's not visible. Do keep in mind though that it would be focusable if it can get focus. This would be confusing because you can't see where the focus is.

  .sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  }
  

  0