Survey Form Feedback: how to use flexbox

Code Feedback
1

Hi!

I got 17/17 on my survey form which is great, but it doesn’t look the way I want it to. So this newbie has some questions. :slight_smile:
My survey form is here: https://codepen.io/JannekeK/pen/jOGXyVW

My questions:
:question: How do I center the Name, Email and Age labels descriptions, as well as the set of radio buttons and checkboxes, so that they align with the rest of the form? Right now I can get the content to align center and in a column, but the radio buttons don’t move with them.
:question:How do I align the radio buttons and checkboxes so that they are above each other, in a column, instead of in a row like now?
:question: How do I change the size of the input fields? I’d like to make them smaller and centered.
:question: I applied a 10% border radius to the header area as well as to the form area, but somehow the header area doesn’t have the same rounded corners as the form. How do I fix this?

I suspect this has a lot to do with applying flexboxes properly but I’m clueless, despite going over the lessons again. Any help is greatly appreciated!

Janneke

2

Looks like I figured one of these things out by myself! I managed to center the label descriptions by setting the flex-direction to column! So excited!

label {display: flex;
flex-direction: column;}

However, just the labels have centered. The radio buttons and checkboxes are still aligned left. How do I center these as well?

1 Like
3

so, full disclosure, i really struggle with flex stuff too, but i’ve found that this guide was super helpful: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks

Basically, everything is broken down into containers (parent) and items (child), but items can also be containers and sometimes that can get tricky if you arent careful.

2 Likes
4

Thank you @xoxoKaralee , that looks very helpful. Will look into it!

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.