Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions11Comments1

All comments

  • Camila• 30

    @sanatoriumx

    Submitted

    This is the second page that i've ever built, so please fell free to give me some advice in what i can do to improve my code.

    Also, I couldn't find a way to align the numbers at the end of the summary and that is driving me crazy.

    Summary Challenge using HTML and CSS

    2

    Eyoel Asfaw• 130

    @Kozetty

    Posted

    Hey Camila, I was also having the same issues with aligning the numbers. What I did to make it work was the following.

    I created a div for the individual boxes called "summary-container" (i.e. the "icons and the word "and then on the other end the "value out of 100").

    Then inside "summary-container", I put a span that contains the icon and the word together. Then I used flex to align them vertically to one another.

    Inside "summary-container", I created another div that contained two spans. The first span contained the value and the other span contained the "/ 100". Then I used flex to align them vertically to one another as well.

    Finally, on the "summary-container" div, I used "display: flex;" with "justify-content: space-between;". Then this pushed the two components on the opposite ends without manually using margins to do so. You also have to set a max-width on the very "main" container that is holding all of the summary boxes. I personally set "max-width: 300px;" and then did "width: 100%;" so it takes up the full max-width.

    If you want to check out my code, my GitHub repository link is the following.

    https://github.com/Kozetty/Summary-result-preview.

    Hope this helps and also you did fantastic on the design.

    Marked as helpful

    0