Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page Responsive

Carla 180

@CarlaCheikh


Design comparison


SolutionDesign

Solution retrospective


I found difficult in responsive!

Community feedback

@amalkarim

Posted

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

@CarlaCheikh

Posted

@amalkarim Thank you so much this is really helpful!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord