Room homepage - HTML / CSS / JS

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!