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

Submitted

main results page using media query

@zapfish1

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Ckola99

Posted

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
Discord logo

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