Skip to content
Submitted over 1 year ago

Results-summary-component using HTML, CSS, Flexbox

Lo-Deck•2,790
@Lo-Deck
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

Hi, I checked HTML and CSS with the W3C validators.

I tested this website with Chrome and Firefox, with Chrome I haven't had any issues. And with Firefox I have some :

  • the"76 of 100" are not centered I need to refresh the page. ** HTML**: line17''' <div class="mainscore"> <p>76<br> of 100</p> </div> ''' CSS: line87 '''.mainscore p{ margin:0; position: absolute; top: 2rem; color: hsl(241, 100%, 79%); }'''

  • When I reduce the size under 375px in mobile desktop(with browser tools), the website is not reponsive(but work well with Chrome and Edge). I tried to modificate some values like width in max-width but always in worse issues.

Thanks for your feedback, and your sharings.

Community feedback

  • Tryt4n•960
    @Tryt4nPosted over 1 year ago

    just use:

    .mainscore {
   display: grid;
   place-items: center;
}

    instead of what you're doing. I think it's the easiest way to center, just two lines of code.

    Marked as helpful
    0
    Lo-Deck•2,790
    @Lo-DeckPosted over 1 year ago

    @Tryt4n Thanks for your comment, I'm trying your solution.

    0
    Lo-Deck•2,790
    @Lo-DeckPosted over 1 year ago

    @Tryt4n Thank you, I modificate my Website with your advice and it works well on Firefox now.

    0

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