Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

interactive-rating-component-main

@soltane1414

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@rickyhewitt

Posted

Unfortunately it seems like it is broken in both desktop & mobile (screenshot)

The star icon can be fixed by updating the path to:

./images/icon-star.svg

The width of the card in the mobile version will need to be increased:

margin: 5% auto 0 auto;
width: 320px;

While the margin between the buttons (.b1, .b2, .b3, .b4, .b5) on desktop will need to be decreased slightly to fit them all on one line as in the original design (or decrease button padding slightly).

As the CSS for the .b1, .b2, .b3, .b4, .b5 is being duplicated, you only need one class for these.

The submission leads to a 404, so unfortunately that also needs to be fixed.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord