Huddle Landing Page using flexbox

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @kyleebustamante,

  Well done for this challenge 👍. Below are a few things that I noticed and you might want to check in order to improve your solution.

  • To correct the horizontal overflow you mentioned, simply apply the following CSS rule in your stylesheet:

  html,
  body {
    margin: 0;
  }
  

  By default, all browsers apply some user agent styles to html elements which can sometimes differ from browser to browser. It is therefore a good practice to normalize these user agent styles so that your website gets a uniform default styling on all browsers. You can read more here

  • On larger viewports the content is expanding all the way horizontally. I would suggest you to apply a max-with: 1440px; to the <div class="container">. You can then use this <div class="container"> element inside your <header> and <footer> elements as well to keep everything consistent. You should end up with an html structure like this:

  html:

  ...
  <header>
    <div class="container">...</div>
  </header>
  
  <main>
    <div class="container">...</div>
  </main>
  
  <footer>
    <div class="container">...</div>
  </footer>
  ...
  

  CSS:

  .container {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }
  

  • On certain viewports, the social icon's shape is getting oval. You could easily solve this by refactoring the styles like this:

  .social {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #ffffff;
    border-radius: 50%;
  }
  
  .social a:not(:last-child) {
      margin-right: 12px;
  }
  
  .social i {
      color: #ffffff;
      font-size: 1.25rem;
  }
  

  I hope this helps.

  Keep it up.

  Marked as helpful

  1

  ---

  

  Kylee Bustamante•90

  @kyleebustamantePosted over 2 years ago

  @christopher-adolphe Great feedback! This is actually very helpful. I really appreciate you taking the time to look at my code.

  0

  

  P

  Christopher Adolphe•600

  @christopher-adolphePosted over 2 years ago

  Hi @kyleebustamante.

  I'm happy to help 🙂

  Best regards.

  0
• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I think the content to the right of the card needs some margin from the left using margin-left.

  In terms of accessibility issues simply wrap all your content between main tags

  In terms of validation errors your links need text so simply provide text within the enclosed tags

  I hope this helps

  Cheers Happy coding 👍

  0