Skip to content
Submitted over 1 year ago

Responsive result summary component (Grid)

Victoria Azola Silva•1,290
@VickyAzola
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

Any feedback is appreciated!

I had some difficulties doing and centeryn the circle using Tailwind, so decided to use CSS instead. If you know a way to do it with tailwind please let me know

Thanks!

Community feedback

  • nicodes•240
    @nicodes-devPosted over 1 year ago

    Hi Victoria, two ways that you could use to center your circle is by adding a display flex or grid on it's parent element.

        //css flex
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

   //css grid
   display: grid;
   place-items: center;
   place-content: center;

   //tailwind flex
   flex flex-col justify-center items-center

   //tailwind grid
   grid place-content-center place-items-center

    then you can remove the margin from your circle

    Marked as helpful
    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