Submitted over 1 year ago

Not so Responsive Rating Form

Gabriel Garcia• 50

@garbiru

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What I find difficult:

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.
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• 350

@Andigashi1

Posted 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
}

Gabriel Garcia• 50

@garbiru

Posted about 1 year ago

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

body{
min-height: 100vh;
display: grid;
place-items: center;
}

Please log in to post a comment

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