Skip to content
Submitted over 1 year ago

Not so Responsive Rating Form

Gabriel Garcia•60
@garbiru
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

What I find difficult:

  1. Centering things the way I want and the most effective/correct way is still hard, I'm still learning how to use flex correctly, so I just end up using flex almost everywhere.
  2. I didn't end up making things responsive, besides a scuffed flex-wrap for the numbers, I ended up having a problem with the sizing of the overall "form", so I used a fixed width. Even though know I could've used max/min width to make it easier.

I will eventually redo this whenever I get more experience in React and CSS.

Community feedback

  • Andi Gashi•410
    @Andigashi1Posted over 1 year ago

    The best way to center elements is to give flex or grid to the body. I usually use flex:

    body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh
}
    1
    Gabriel Garcia•60
    @garbiruPosted over 1 year ago

    @Andigashi1 Here's a cool way with grid as well.

    body{
min-height: 100vh;
display: grid;
place-items: center;
}
    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