Interactive rating component - css grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @kirawesh, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  You did a good job here putting everything together. I’ve some suggestions for you:

  1.To maintain the card responsive use max-width instead of width this way you allow the content to be flexible. The difference between max-width and width is that width is fixed and max-width has a maximum size but can shrink to fit the content.

  2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  3.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Kira Weizman Shapira•90

  @kiraweshPosted about 2 years ago

  Thank you @correlucas for your helpful feedback!

  1. I see, fixed that. But how to keep the gap between the rating buttons in mobile view? They disappear when I'm shrink the card.

  2. I would love to see what clean code looks like, to understand how not to add unnecessary things as you said.

  3. Fixed that.

  Thank you so much :)

  0