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

Used basic css and html. Mixed flexbox with grid layouts

TekNellCo 40

@TekNellCo

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


-I feel like I can clean my code up a bit more. For example the fractions of /100, I used seperate selectors for to change the colors. Is there a more efficient way of say changing a few words colors within a <p> element? Or do I just have to use a span and select them? -Also, I have no idea how to format this for mobile yet.

Community feedback

Aimal Khan 2,260

@Aimal-125

Posted

In your CSS code, increase the height of body element to 120 or 150vh by using media query with max-height: 400px; So that your card look good on small heighted screens.

1

@Raheem-king

Posted

your design looks good, while designing mine i grouped the text and the fraction(81/100) in a seperate paragraph making the colouring of the text much easier by giving them classes. just like u said span also works, the goal is to replicate the design so whatever way you use and u get the result, i think it's fine. regarding the mobile version try using media queries to make ur mobile design responsive. Hope this was helful, and i wish you luck in your learning journey.

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