Skip to content
Submitted about 2 years ago

Responsive interactive rating panel without any framework

Tomas•60
@TommyShelby21
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

Hi, i had only one problem with this one. I wanted to make it larger but i didnt know how to resize the height :(

Community feedback

  • yishak abrham•2,150
    @yishak621Posted about 2 years ago

    well it depends on how did u build the card component if u build it with grid u can increase its height by vertical padding in my case its 3rem for vertical padding ..and also row gap should be precise .card-container { display: grid; grid-template-columns: 30rem; max-width: 40rem; row-gap: 2.3rem; padding: 3rem 2rem; background-color: var(--color-dark-blue); border-radius: 20px; } by the way u swap the hover(.btn-rating:hover { background-color: var(--color-light-grey); color: var(--color-white); }) and selected color (.btn-active { background-color: var(--color-Orange); color: var(--color-white); })

    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