Vanilla HTML & CSS

Community feedback

• 

  Ranit Manik•880

  @RanitManik

  Posted about 1 year 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

  02

  Marked as helpful