Skip to content
Submitted almost 2 years ago

Rating Card

Robert Strzelczyk•440
@rStrzelczyk98
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

1) I added some extra styles to "submit" button in "form:invalid" state. To prevent user from submitting empty form. 🎨

2) Any ideas how to center numbers in circles without using position: absolute? I have tried CSS grid or flex to center them in x and y axis, change line height, but always there was some white space underneath number. 🤔

I will greatly appreciate any feedback.

Community feedback

  • Jesus•410
    @jesusleonel10Posted almost 2 years ago

    One way you can fix the problem is to first use flex for the container along with its respective justify-content and align-items both values in center. Finally use an upper padding of 1rem (or em if you prefer) and the lower one with a value of 0.8rem At least it was the solution that worked for me, clearly there will be better ones.

    I hope it helps you 🤓✌

    Marked as helpful
    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