Skip to content
Submitted about 1 year ago

Result-Summary-Component-main

accessibility
ElianaRestrepo99•190
@ElianaRestrepo99
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I feel proud to be able to make a beautiful template with beautiful color tones. I would improve the shape of the align-items, position of the images.

What challenges did you encounter, and how did you overcome them?

The biggest challenge I had was playing with color tones and positions when justifying the content, I solved it by calling the class by its id and its companion in this case were title size (h3), words (p).

What specific areas of your project would you like help with?

I would like to receive help in the summary_item class since justify-content was difficult for me, with the goal of not being able to separate the letters from the numbers. thanks muchs.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,790
    @danielmrz-dev

    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!

  • Koda👹•3,830
    @kodan96

    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! 🙌

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord