Room homepage - HTML / CSS / JS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @BT453567,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful!

  1. Using height: 100vh Instead of height: 100%

  Instead of using height: 100%; for the body, use height: 100vh;.

  Reason: 100vh refers to 100% of the viewport height, ensuring that the body always fills the full height of the browser window, even if the content is less than the viewport height. This prevents issues where the body might not fully stretch to the bottom of the viewport.

  body {
      height: 100vh;
  }
  

  2. Preventing Stretching on Large Screens

  Your website keeps stretching as we increase the screen size because you use width: 100% in .grid-container. You can solve this issue by using a max-width of 1440px instead of width: 100%.

  After doing this, you might need to center the .grid-container horizontally, as it will get aligned to the left by default. You can center it by making the body element a flex container and using justify-content: center.

  body {
      display: flex;
      justify-content: center;
  }
  
  .grid-container {
      max-width: 1440px;
      width: 100%;
  }
  

  3. Making the Header (nav) Sticky

  One more improvement you can do is make the header (nav) sticky so that users can always see the header when they scroll.

  header {
      position: sticky;
      top: 0;
      z-index: 1000; /* Ensure it stays above other content */
  }
  

  Summary

  1. Use height: 100vh for the body to ensure it fills the viewport height.
  2. Apply max-width: 1440px to .grid-container and center it using flexbox on the body.
  3. Make the header sticky for better navigation visibility.

  I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

  Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  Marked as helpful

  1

  ---

  

  BT738844•680

  @BT453567Posted 4 months ago

  Hello @krushnasinnarkar

  Thanks for those recommendations

  I like the animations you have used on your solutions

  0

  

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Thank you, @BT453567, for appreciating my animation! You can check out my repository code to see how I implemented it.

  Feel free to reach out if you have any more questions or need further assistance.

  Happy coding!

  0