Huddle Landing Page With Single Introductory Section

Community feedback

• 

  T

  Grace•30,990

  @grace-snowPosted almost 3 years ago

  The reason you’ve struggled to lay this out with flex box only is because of the markup structure you’ve chosen. Remember flex is for laying things out in one direction, along one axis at a time. So if you want to use flex on this, the header with logo inside is one flex container, the illustration and intro text are children of a separate flex container, and the social links are children of a third flex container.

  If you want an easier way to lay this out along two axis, make all these parts children of one container and use css grid to align each bit of content in their own grid area.

  With the social links, to stop them looking stretched and distorted, that’s one time it’s a really good idea to give them an explicit width and height.

  Good luck

  Marked as helpful

  1
• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  Hey good job on this challenge! Your report above shows a few issues though:

  • <section> and <article> usually need a heading; so if you don't need a heading in it, use some other element such as <div>
  • <a> should have an aria-label ... Read more here
  • use <a> and style it like a button, but don't use a <button> with an <a> inside of it

  Here's my repo for future reference.

  Hope this helps :)

  Marked as helpful

  1
• 

  Jordan Phillips•425

  @JordanPhillips-hubPosted almost 3 years ago

  Align items controls the cross axis when flex direction is row that is up and down, justify content controls the main axis witch is left and right, try using justify content: flex-end.. the axis will be reversed when flex direction is column cross axis left and right main axis up and down.

  1