Skip to content
Submitted almost 3 years ago

Responsive rating card using react

react, styled-components
Ajay•50
@Away87
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The texts are actually elevated up a bit. It messes with centering. If you look closely in the rating icons, you can notice the text is not centered correctly. I found that it is being caused due to the font-family. Anyone know the Issue ? Other Feedbacks are appreciated. Thank you in advance

Code

Please log in to post a comment

Log in

Community feedback

  • Nurcholis•420
    @cholis04

    Congratulations on your work.

    I guess you can assign value to justify-content to space-between so that the spacing between buttons is equal and fills the wrapper on the form.

    export const RatingIcons = styled.form`
	display: flex;
	justify-content: space-between; // Replace space-evenly
	margin-bottom: 1em;
`
    Marked as helpful
  • Remtaine•360
    @remtaine

    Looks pretty good! The logic for the rating input works as well. Regarding centering text, I'll throw out some ideas you may try. One method would be turning the buttons into a flexbox and then centering it on the y axis. Alternatively, you may also try setting the vertical-align to middle. You could also just add a bit more padding at the top of the text, though that's a less responsive solution.

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