Huddle Landing Page Responsive

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Carla 👋

  Congratulations for finishing the challenge!

  So you found difficulty regarding the responsive design. I don't quite understand about what kind of difficulty that you mean. Nevertheless, let me give you some suggestions regarding the overall code.

  • Remove this style:

  @media (max-width: 500px)
    body {
      width: 500px;
    }
  }
  

  Because that style will make the page scaled down when the browser width is less than 500px;

  • Add align-items: center; to <div class="build"> to prevent <img src="images/illustration-mockups.svg" alt="illustration-mockups"> squeezed when the browser width is between 701px and 1075px.
  • Add the same style to <div class="headd"> to prevent Huddle logo squeezed at certain width.
  • Reduce Huddle logo's max-width and the padding of <button>Try It Free</button> at @media screen and (max-width: 500px) to prevent those two elements touch each other in small screen.
  • Instead of placing <p>© Copyright 2018 Huddle. All rights reserved.</p> inside <div class="icon">, I think it's better to place it outside, for example below <div class="all"> and give it style text-align: right;.
  • Lastly, kindly check the accessibility report and HTML validation report sections to see the problems (regarding accessibility and validation) and how to solve them.

  That's it. If they still don't solve your particular problem, please let me know.

  I hope you find these comments helpful. Happy coding!

  1

  ---

  

  Carla•180

  @CarlaCheikhPosted almost 2 years ago

  @amalkarim Thank you so much this is really helpful!

  0