interactive-rating-component-main

Good job on completing this challenge!

I wouldn't recommend using vb values on the widths and heights of the star image and submit button the way you have here.

This is because when you reduce the height of the viewport enough, you eventually run into an issue where the height of these elements becomes far too small.

For example, the star image becomes so small that you can no longer tell it's a star, and the submit button gets squeezed to the point where the text overflows outside the box because it's so squished.

To fix this, you can simply change these values to px values instead:

img {
  width: 15px
}

button {
  height: 35px;
}

The width and height values that I've used here are examples, you may adjust them to your liking if you plan on implementing this suggestion.

I see that you've used padding to try and center the card on the page, but this method only works on a very specific screen size.

An alternative method you could try is using flexbox and min-height: 100vh like so:

body {
  padding-top: 200px; ❌
  margin: 0;
  min-height: 100vh;
  align-items: center;
}

margin: 0 resets the margin added by the user agent stylesheet so that it doesn't interfere with the layout.

min-height: 100vh sets the height of the viewport to 100vh initially while still allowing it to expand beyond that if necessary.

align-items: center centers the card vertically on the page.

While testing the buttons on your page, I noticed that hovering over one of the rating buttons also causes the button before it to change its colour as well. Was this intentional?

Other than that, this is a very good solution to this challenge!

Hope this has been helpful! :)