Interactive-rating-page using CSS Flexbox

Hello Vincent Daniel !

Congratulation for finishing the project

I looked at your code and I find out why you had problems with your layout, it was because of the css you put in your main, which caused a lot of trouble ! It was using some of the property you defined, and made you layout having a weird behavior !

Here's the fixed version I have done :

main {
  color: white;
  width: 20%;
  padding: 1em;
  border-radius: 25px;
  background: linear-gradient(hsl(219, 24%, 11%) 60%, hsl(219, 20%, 26%));
  padding-right: 30px;
}

It fixes most of the problem, but there's still some work with your css to adjust.

I saw you repeated many media queries just for using the property, why don't you regroup into one and unique media query ?

@media(max-width: 1800px){
    main{
        width: 352px;
    }
}

You can just keep this one above and delete the others, which are not needed.

Also, in your HTML file, you imported directly the svg using the content but you can import it like a normal image :

<img src="your_file.svg" alt="">

It will make your HTML code cleaner !

Good job, keep going and I hope it will be useful to you !

Hey Vincent!

Congratulation on finishing the project 🎉 The reason why your submit button is not getting centered is that your <main> element has a property of

    padding-right: 30px;

remove that and the submit button will get centered. Hope I helped you in solving your query. Happy Coding :)

HI @davinceey,

Congrats on completing the challenge, seems like there's a bug where the rating gets selected the first but not if you change to a different rating so the previously selected ratting stays selected but a different rating number is used.