Result-Summary-Component-main

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution looks great!

  I have a suggestion:

  • Since you set grid to the body, but you didn't set the size of the rows, your footer is pushing your card up a little bit. You can prevent that from happening adding this to the body:

  grid-template-rows: 90% 1fr;
  

  Then your card will always occupy 90% of the space and the footer will adapt in the remaining space.

  Also, you mistyped min-height: 100vh, once you correct it, your card will be centered.

  I hope it helps!

  Other than that, you did an excellent job!

  1

  ---

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 5 months ago

  @danielmrz-dev

  I always had this issue and stopped using attribution because of it.

  Is there a similar solution when using flex on the body instead of grid?

  Also wouldn't this make it so it's not perfectly centered since it is centered only within 90% of the space? What's the solution to have an attribution and have it perfectly centered.

  1
• 

  P

  Koda👹•3,830

  @kodan96Posted 5 months ago

  hi there! 👋

  you applied justify-content: space-between to your .summary_item selector, which has only one direct child, so it can separate your elements. just apply width: 100%; and justify-content: space-between to your .flex_group selector. if you want to make your style more like the original, you need to separate your img and the h3 element from the paragraph:

  <div class="flex_group">
    <div>
      <img/>
      <h3>
    </div>
    <p>
  </div>
  

  this way .flex_group will have 2 direct child, not three and it can span the two to the two side

  Hope this was helpful 🙏

  Good luck and happy coding! 🙌

  1