interactive rating component

Community feedback

• 

  MaximilianoDanielGarcia•2,000

  @MaximilianoDanielGarciaPosted 12 months ago

  Hi Giovanni, great job!

  If are wondering how to center the component, you have two ways:

  • Flex Box

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  • CSS Grid

  body {
      display: grid;
      place-items: center;
      min-height: 100vh;
  }
  

  After apply one of these, remove margin-top and margin-left from your .card class.

  I hope this are helpful to you.

  Marked as helpful

  1

  ---

  

  Giovanni•100

  @jionnyMagiahPosted 12 months ago

  @MaximilianoDanielGarcia Hi! Thank you for your suggestion. Actually I use the margin-left and margin-top to overlay the component with the desired design (I set the desktop-design.jpg as background image to have a reference for font size and all other margins). When I'm happy with the result I remove those margin-left and margin-top and replace them with

  body{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  but evidently I forgot that last part. Thanks for pointing that out to me :)

  0