Skip to content
OverviewSolutions
8
Comments
1
P
Ghenu Andreea Daniela
@danyela2000

All comments

  • Ghenu Andreea Daniela•130
    @danyela2000Posted over 1 year ago

    Hi, congratulations on completing this project!

    • In the CSS file, on the ".section" selector, you used the "justify-content: space-between;" property. This adds an equal space between flex elements and this should be removed, because you don't want the elements to be equally spaced, in this case.

    • You can group the last two elements (the current score and the percent) in one paragraph with a class of "detailed score", and set a "margin-left : auto;" to this paragraph. This property will align them to the right. Instead of using two separated paragraphs for each element, you can wrap the percent into a <span> element and style it separately, like so:

    <p class="detailed score">80 <span class="hundred"> / 100</span></p>

    You can find out more about how to use auto property on margins to align elements in a flexbox, here :

    1. https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
    2. https://css-tricks.com/how-auto-margins-work-in-flexbox/

    • Then, you should set a margin left of 1em on the h3 element, to add a bit more space between it and the icon.

    • Regarding the button, you can fix it like so: Remove the div that wraps the button element.
      And now, the button is a "child" of the ".summary" container. You should:

    1. set the ".summary" selector to be a flex container. (display: flex)
    2. set the direction of the flex to be on the column not on rows ( "flex-direction: column")
    3. and last but not least: don't forget to center the text inside the button element!

    That's it. I hope it helped you to solve the problem! Good luck on your learning journey!

    Marked as helpful
    0