Interactive Rating Component

Community feedback

• 

  Alberto Ledesma•370

  @ledesmxPosted about 1 year ago

  Hi @ashkan-zs 👋

  Great job on your solution!

  The rating component works pretty good.

  Here are some recommendations for you:

  • There is a better approach to change the width of the component based on the screen's width. Instead of using a media query, I suggest using width and max-width properties together. You can usemax-width to prevent the component from streching too much. See the example below.

  .Card_card__7Eml9 {
    width: 90%; 
    max-width: 420px; /*This will prevent from streching out more than 420px*/
  }
  

  • I also suggest using transitions in your buttons to add a smooth transition while the background-color and the color change. Check out the MDN Web Docs to see how it works: https://developer.mozilla.org/en-US/docs/Web/CSS/transition

  .Ratings_rate-btn__bqd2Z {
    transition: background-color .2s, color .2s;
  }
  .RateForm_card__btn__wHc2p {
    transition: background-color .2s, color .2s;
  }
  

  In summary I suggest adding this code:

  .Card_card__7Eml9 {
    width: 90%;
    max-width: 420px;
  }
  .Ratings_rate-btn__bqd2Z {
    transition: background-color .2s, color .2s;
  }
  .RateForm_card__btn__wHc2p {
    transition: background-color .2s, color .2s;
  }
  

  And removing this:

  .Card_card__7Eml9 {
    width: 30%;
  }
  @media (max-width: 768px) {
    .Card_card__7Eml9 {
      width: 90%;
    }
  }
  

  I hope this helps a little.

  Well done for the rest.

  Marked as helpful

  1

  ---

  

  Ashkan Zarifian Sanatkar•140

  @ashkan-zsPosted about 1 year ago

  @AlbertoLed Hi Alberto, thanks for these recommendations. that was very helpful.

  0