Skip to content
Submitted about 1 year ago

main results page using media query

Letícia Oliveira•300
@zapfish1
A solution to the Results summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

starting the project is one of the most challenging parts and i try to overcome it by trying, even if i feel overwhelmed and lost at first, my head clears out as i work on the project little by little!

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

i couldnt figure out how to stack '76 of 100' vertically. in the end i liked the side by side version, so i didn't bother with it... however, id love to know how i couldve done it

Code

Please log in to post a comment

Log in

Community feedback

  • Christopher Kola•260
    @Ckola99

    Hi there, first of all great work. I envy your colour and gradient skill there haha! I couldn’t get mine to be as accurate.

    To get the number 76 on a different line I used a span tag:

    <p class="result-score"> <span>76</span> of 100 </p>

    There after I styled it appropriately and placed a display block on the span tag so it could take up the whole line and push the other text to the next line like below :

    .result-score span { display: block; font-size: 5rem; font-weight: var(--fw-black); line-height: 1; color: white; }

    You’re welcome to check out my solution on my profile.

    Marked as helpful

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