Results Summary Component using Flexbox

Community feedback

• 

  Victoria Azola Silva•1,290

  @VickyAzola

  Posted almost 2 years ago

  Hi, 👋 welcome to the community! 👩‍💻 👨‍💻 Nice work finishing this challenge.

  A few tips I can give you:

  • To center the card vertically and horizontally, you can use grid or flex on the body, like this:

  With grid

  body { 
      min-height: 100vh;
      display: grid;
      place-content: center;
      font-family: 'Hanken Grotesk', sans-serif
  }
  

  With flex

  body { 
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: 'Hanken Grotesk', sans-serif
  }
  

  • Fix the container, let only the display flex, and delete the set width and height. Also, the default direction of flex is always row, so you don't need to specify it (unless you want a diferent direction). The class parent would look like this:

  .parent {
      display: flex;
  }
  

  • To center the circle, you can use margin auto. And to center the content in the circle, use Flex, like this:

  .overall-score {
      margin-inline: auto;
  
      border-radius: 50%;
      background-image: linear-gradient(hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
      text-align: center;
      width: 200px;
      height: 200px;
  
  //to center the contetn
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
  }
  

  • Also, remove the defaul margin on the h1 and h5 and use a bigger font-size on the h1:

  .overall-score h1 {
      color: hsl(221, 100%, 96%);
      margin: 0;
      font-size: 80px;
  }
  
  .overall-score h5 {
      color: hsl(241, 100%, 89%);
      margin: 0;
  }
  

  • For the button, add border: none;
  • And on hover, add the color and pointer:

  button:hover {
      background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
      cursor: pointer;
  }
  

  Hope this helps! 🤗

  11

  Marked as helpful