Flexbox, HTML, CSS, JS solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @rhyuen, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  To improve the card overall responsibility, you can start to add flex-wrap inside the class that manages the section for the rating numbers button and makes the adjust to fit in different rows while the container scales down, not that without this property the container doesn't shrink. Here's the code applying these changes:

  .card__row {
      display: flex;
      justify-content: flex-start;
      margin: 1rem 0;
      flex-wrap: wrap;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Alejandro25A•220

  @Alejandro25ARPosted about 2 years ago

  Hi @rhyuen.

  You can't align the list of options to the left, because the inputs are still visible and taking up space, so the justify-content:space-between also affects them. To fix this you could place the hidden entries as follows:

  .card-row input {
     display:none;
  }
  // or you could 
  input[type="radio"] {
    display:none;
  }
  

  That way they don't take up space and the list is already left-aligned.

  Good job, keep up the good work!

  Marked as helpful

  0