Skip to content
Submitted about 1 year ago

Responsive Interactive Rating Component

Natalie Smyth•340
@nataliesmyth
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

The thing I struggled most in this challenge is getting the ratings exactly centered. When I add a border it's obvious that the numbers are close, but not exactly in the middle. Any best practices/tips on solving this issue would be appreciated!

Community feedback

  • Roraima Lugo González•510
    @roraima1986Posted about 1 year ago

    Hello, I think the problem is because you declared the rating numbers with a span tag.

    Span is an inline element. It has no width or height and therefore does not allow centralization.

    My recommendation is that you convert them into an ul tag.

          <ul class="rating">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
         </ul>
    Marked as helpful
    1
    Natalie Smyth•340
    @nataliesmythPosted about 1 year ago

    @roraima1986 Thank you so much!

    0

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