Huddle repsonsive landing page using CSS Gird

Community feedback

• 

  Ceejay•20

  @C33jayPosted over 2 years ago

  Thanks everyone, I was able to make it better with your suggestions.

  0
• 

  Alex Holguin•410

  @JAleXDesigNPosted over 2 years ago

  Good job, completing the challenge!! I recommend that you place each section inside a container with a maximum width so that all the content is centered horizontally for instance

  <main class="container container-main">
         <div class="col-img">
         </div>
         <div class="col-text">
         </div>
  </main>
  <footer class="container-main">
  </footer> 
  

  and in the CSS:

  .container-main {
      margin: 0 auto; //or use flex to center
      max-width: 1200px;
      width: 90%;
  }
  

  Set the main image to width 100% so that it is adaptable

  .col-img img{
      width: 100%;
  }
  

  And the social network icons you can align to the right or center using flex and media queries so that on large screens it aligns to the right and on small screens it aligns to the center. you can achieve it like this:

  <footer class="container-main">
      <div class="social-icons">
          <i class="fa fa-facebook" aria-hidden="true"></i>
          <i class="fa fa-twitter" aria-hidden="true"></i>
          <i class="fa fa-instagram" aria-hidden="true"></i>
      </div>
  </footer>
  

  and in the css

  .social-icons {
      display: flex;
  }
  @media (min-width: 982px) {
      .social-icons {
          justify-content: end;
      }
  }
  @media (max-width: 981px) {
      .social-icons {
          justify-content: center;
      }
  }
  

  It is a quick example, I hope I have helped you. Congratulations!!

  0
• 

  Benjamin Mancuello•40

  @Mancux2premiumPosted over 2 years ago

  Hello, I was reviewing the code, I solved the problem by placing a {margin: 2px in the before facebook}, try it and tell me if the result convinces you. Greetings.

  .fa.fa-facebook:before { margin: 2px; }

  0
• 

  Miroslav•180

  @miroslavdurinPosted over 2 years ago

  Hello Ceejay, congratulations on finishing this project. There are couple of ways to center facebook icon, I would probably center all of icons by using flexbox on footer .fa class:

  footer .fa {
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  Good job and happy coding :)

  0