Using Flexbox and JavaScript

Community feedback

• 

  Lee•230

  @LeeConnelly12Posted over 2 years ago

  Your rating component looks super close to the design, good work!

  Only thing I noticed is that your ratings are getting squished.

  This is happening because you're setting the ratings' size using padding: 6%.

  You can see the rating's padding in this screenshot

  As you can see from the screenshot above, padding is getting added around the content in the element.

  So because the numbers are taller than they are wide the padding will make the ratings look tall.

  One way to fix this would be by setting a fixed width and height on your .rating elements

  .rating {
    // padding: 6%; can now remove this as we're setting a width and height
    width: 5rem; 
    height: 5rem;
  }
  

  Then, to center the number inside each of the ratings you could use CSS grid, like so:

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

  0

  ---

  

  Md Kaif Ansari•590

  @Kaif121122Posted over 2 years ago

  @LeeConnelly12 thanks for giving suggestion it's helpful

  0