Expenses-chart

Community feedback

• 

  Khemmie Ray•280

  @Khemmie-RayPosted about 2 years ago

  Hello Yaika, I tried your suggestion but it took the banner farther away from the bars. Thanks for the suggestion.

  0
• 

  Yaika Race•290

  @YaikaRacePosted about 2 years ago

  Hello Khemmie, congratulations on completing this challenge! The solution to your problem is simple, you have to add position: relative; to your .chart-container and it will look like this:

  .chart-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      position: relative;
    }
  

  This so that your .banner takes as reference of position to the container in which it is, after this you add a top: -48px; (this can be more or less distance depends on your taste) and it would be like this:

  banner {
      background-color: hsl(25, 47%, 15%);
      color: white;
      margin-bottom: .7em;
      padding: .4em .2em;
      border-radius: 5px;
      text-align: center;
      position: absolute;
      top: -48px;
      display: none;
  }
  

  And so all the banners will appear near their corresponding bar.

  This was my solution to your problem, I hope I helped you!

  happy coding!

  0