Submitted about 2 years ago

Interactive Rating Component (FM)

RichusD•90

@RichusD

A solution to the Interactive rating component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

P
Elyse Kanagaratnam•300
@elyyyse
Posted about 2 years 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

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