Results Summary Component using HTML/CSS

Community feedback

• 

  P

  Mateus Belício•710

  @mateusbelicioPosted about 1 year ago

  Hi, Julie! Congratulations on completing the challenge, it was really good! 👏🏻

  Answering your question...

  To prevent the bars in the summary section from collapsing on small screens, simply add the white-space: nowrap; property to the black-text class.

  .black-text {
     white-space: nowrap;
  }
  

  And to prevent the content from causing overflow, set a minimum width for the summary section, this way the summary-score will not break.

  .summary {
     min-width: 16rem;
  }
  

  Another detail that I noticed is that the gap between scores is very small on small screens and is almost unnoticeable. I recommend adding the gap property to the summary-scores flex container, this way it will create a space between all flex items.

  .summary-scores {
     gap: 1rem;
  }
  

  Congratulations once again, great job! 😁

  Marked as helpful

  1

  ---

  

  P

  Julie•150

  @jclegg31Posted about 1 year ago

  @mateusbelicio thanks for the feedback and the help! I tried the first two suggestions but didn't notice a difference at all. The last suggestion definitely made a difference and that gap thing was what was bugging me. Now that it's set for not going smaller, is there way to keep it stationary if the screen is bigger top to bottom? The gap grows...

  Thanks! Julie

  0

  

  P

  Mateus Belício•710

  @mateusbelicioPosted about 1 year ago

  Hey, Julie! Now I understand what you were talking about, I didn't understand it the first time, I'm sorry. I was looking in the horizontal direction instead of the vertical.

  So what is causing this problem is the height settings you have set. You don't need to determine a fixed height, like 80%, for example. The height of each div will be determined by its respective content. So, just remove the heights you defined in the div summary and summary-score.

  And in addition, you defined a fixed height of 100vh in the container, this causes an overflow when the content becomes larger than this value. I recommend removing this definition so that the height of the container is defined by its content, or if you prefer, use min-height: 100vh, this way, when the screen size is greater than the content, the container will be 100% of the screen size. screen, and if the content is larger, it will not cause overflow.

  And if you choose the second option and want the content to be aligned to the top, instead of creating a blank space when the screen height is too large, simply change the justify-content property present in the div container for flexible start.

  Happy coding! 👨🏻‍💻

  0