Responsive landing page using flexbox

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Nice work on this challenge, Anthony. The issue with your mobile layout is due to a couple of things:

  • You're setting width: 400px; on the header. So this is staying at 400px even if you're on mobile phone with a smaller screen size. One workaround would be to add max-width: 100%; to the element which would make sure it never grows to more than 100% of the browser window width.
  • Another issue is that you're not setting the box-sizing on all elements to be border-box. That means you're using the old W3C definition of the box model whereby padding and border values are added onto the width of an element. It's standard practice to set all elements on the page to be sized by their border-box. Here's a great article on CSS Tricks for more information on this.

  Hopefully, that will help you resolve the issue on mobile. Keep up the great work and let me know if you have any questions 🙂

  0

  ---

  

  Anthony Passler•100

  @anthonyPasslerPosted over 4 years ago

  @mattstuddert thank you so much for the feedback - very kind :)

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @anthonyPassler you’re welcome!

  0