Responsive + FlexBox

Community feedback

• 

  Martin•1,150

  @ringm

  Posted over 4 years ago

  Hey Nazar, congratulations on submitting your first challenge. It's looking good! I have some suggestions to help you improve it:

  • instead of using fixed margins on the .content-wrapper, consider using something like width: min(90%, 1100px); and margin: 0 auto;. With these two you'll get a fluid and centered container.
  • for the header, remove the flex: wrap;. Instead, try flex-direction: row; and when it gets too narrrow you change it to flex-direction: column;
  • same as the header, remove the flex-wrap from .gallery-wrapper and also remove the fixed width on it's child elements, let them be fluid and stretch to the available space. once the screen get's too narrow, you can change the flex-direction on .gallery-wrapper to column.
  • also, the HTML report is yelling at you because you didn't include any h2-h6 tags inside the <section>. To avoid this problem, you can either change the sections elements for regular divs or include headings and hiding them.

  Keep at it! I'm looking forward to your next project!

  10