Results Summary using HTML and CSS

Community feedback

• 

  MrDeveloper01010•240

  @istfredyPosted over 1 year ago

  ##Hello, already it is an excellent code that I see there :) But I can notice that the result block and the summary block don't have the same width. to fix that, I think that seen your code, you have to give 100% to each of the two blocks, a bit like this:

  .result {
      width: 100%;
      justify-content: space-around;
  }
  

  the justify-content: space-around; is for the inter-space between the different blocks.

  and moreover, the text: "Your result" and "Summary are not very well aligned." I think to fix this, given your code, you should do this:

  .summary {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 3em 3.2rem;
  }
  
  /* We give the same size to the titles */
  
  .summary h1{
  font-size: 2.4rem;
  }
  

  I really hope this will be useful to you. I saw your source code that's why you see exact values ​​on my properties ;)

  Marked as helpful

  0

  ---

  

  Danyel Varejão•160

  @danyelvarejaoPosted over 1 year ago

  @MrDeveloper01010

  Thanks for review, what do you think about using flex: 1 in flex childrens?

  0

  

  MrDeveloper01010•240

  @istfredyPosted over 1 year ago

  @danyelvarejao

  When you give flex: 1; to each child element, it means that each element is going to take as much space as possible in the parent container. In this case, if the parent container has a fixed width like in our case, and you give flex: 1; to each element, the two elements will each take up exactly 50% of the width of the parent container, just like if you have given width: 50%; to each element.

  So yes you can very well use flex:1; on each child and remove the width:100%; that you put on each one.

  Marked as helpful

  1