Skip to content
Submitted over 1 year ago

Interactive Rating Component (FM)

RichusD•90
@RichusD
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have two questions:

  • The star SVG appears to have its tips cut off a bit once the border radius was added to it. How can this be corrected?

  • My main card element (with the ".card" class) for some reason won't respond to the width measurement in its CSS, but will respond to its max-width. Why? Am I doing something wrong or applying things weirdly?

Any feedback on my general coding is also appreciated, especially if you have any guidance around best practices etc.

Community feedback

  • Elyse Kanagaratnam•300
    @elyyysePosted over 1 year ago

    Hey, @RichusD - Nice job with the transitions, that was a nice little something extra. On your two questions:

    • You can correct the star tips being cut off by wrapping it in a <div> and styling that. So something like:
    <div id="star-design">
<img src="images/icon-star.svg">
</div>

#star-design {
// styles go here
}
    • I see you have width set to 100% on the .card class. Are you saying it wouldn't respond to a pixel value? Happy to help, just not sure I understand the issue yet.
    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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