Vanilla HTML & CSS

Community feedback

• 

  Ranit Manik•880

  @RanitManikPosted 5 months ago

  Congratulations on completing the challenge! Here is my feedback for you:

  • Centering the Container: Avoid using position: absolute for centering elements. Instead, use a more effective method by applying min-height: 100vh; to the body and display: grid; place-items: center; to center the .container. This ensures better responsiveness and alignment.

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
    }
    

  • Unit Choice for Styling

    • Opt for using rem instead of px or em for properties like width, height, margin, padding, and font-size. This choice ensures better scalability and responsiveness. Detailed information can be found in this article.

    /* Use rem for Better Scalability */
    .container {
      width: 57.4375rem; /* Equivalent to 919px */
      height: 31.3125rem; /* Equivalent to 501px */
     font-size: 1rem; /* Equivalent to 16px */
    }
    

  If you find this comment helpful please mark it as helpful

  Marked as helpful

  0

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted 5 months ago

  @RanitManik @sergrosu

  For font-size, it is best to use rem. Using em is rarely necessary for font-size; the only time you should use em is when you need an element's font-size to scale with its parent. Examples of that would be letter-spacing, buttons/anchors, etc...

  More Info:

  https://fedmentor.dev/posts/font-size-px/

  Marked as helpful

  0

  

  Ranit Manik•880

  @RanitManikPosted 5 months ago

  @VCarames I mistakenly wrote "em" there. As you can see, I suggest using "rem" instead of "px" or "em" for properties like width, height, margin, padding, and font-size.

  Marked as helpful

  0