v• 110
@ughvop
Submitted
I fixed the flex problem, thanks to all who have helped!
P
Ghenu Andreea Daniela
@danyela2000
All comments
- P
@danyela2000
Posted
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 :
- https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/
- 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:
- set the ".summary" selector to be a flex container. (display: flex)
- set the direction of the flex to be on the column not on rows ( "flex-direction: column")
- 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 -
