Skip to content

Add Flex Superpowers to the Tweet Embed

To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning.

Add the CSS property display: flex to all of the following items - note that the selectors are already set up in the CSS:

header, the header's .profile-name, the header's .follow-btn, the header's h3 and h4, the footer, and the footer's .stats.

Tests

  • Waiting: 1. Your .follow-btn should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
  • Waiting: 2. Your header should have a display property set to flex.
  • Waiting: 3. Your footer should have a display property set to flex.
  • Waiting: 4. Your h3 should have a display property set to flex.
  • Waiting: 5. Your h4 should have a display property set to flex.
  • Waiting: 6. Your .profile-name should have a display property set to flex.
  • Waiting: 7. Your .follow-btn should have a display property set to flex.
  • Waiting: 8. Your .stats should have a display property set to flex.
/**
* Your test output will go here
*/