Responsive Huddle landing page with vanilla HTML and CSS

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @JEWebDev,

  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!

  Issue: Website Stretched on Large Screens

  Your whole website gets stretched for large screen sizes, not just the footer, but other components as well. They appear left-aligned and don't feel normal because of the lack of a maximum width. This issue arises because you didn't set a max-width for your website's container.

  Solution: Use a Wrapper with max-width

  To solve this, wrap all your components (header, main, footer, .attribution) inside a div and give it a maximum width using the max-width property. This will ensure that your content remains centered and doesn't stretch awkwardly on larger screens.

  Here's an example of how you can do it:

  <div class="container">
    <header>
      <!-- Your header content -->
    </header>
    <main>
      <!-- Your main content -->
    </main>
    <footer>
      <!-- Your footer content -->
    </footer>
    <a class="attribution">
      <!-- Your attribution content -->
    </a>
  </div>
  

  And in your CSS:

  .container {
    max-width: 1200px; /* or any width that suits your design */
    margin: 0 auto;
    padding: 0 20px; /* optional padding for better spacing */
  }
  

  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

  0

  ---

  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  @krushnasinnarkar

  Thank you! it now looks way better!

  0