Skip to content
Submitted 6 months ago

main results page using media query

Letícia Oliveira•300
@zapfish1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

Community feedback

  • Christopher Kola•210
    @Ckola99Posted 6 months ago

    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
    1

Please log in to post a comment

Log in with GitHub

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