Aligning labels with inputs (Need help for Survey Form Project)

Aligning labels with inputs (Need help for Survey Form Project)
0

#1

Hey!

I’m re-doing survey form project for pratice. Still having trouble T_T.

I can’t align labels with inputs :/!

Here’s my code: https://codepen.io/Tech_CA_Bro/pen/PdqKdB

Thanks!


#2

Are you talking about vertical alignment?

Try turning the mutual parent container into a flex container and using flex properties to center the items you want centered. I tried it in your code and it worked well :slight_smile:


#3

Hey sorry for my late response was eating^^! I’ll try it out but what I mean is why is the input sort of on top of the label and not aligned.


#4

Yo! Thanks for the help I was able to make it better however I don’t really understand how I did it :I.

Thanks!


#5

In “.labels-l” I would remove the vertical align and justify-content options (justify-content doesn’t do anything if it’s not in a flex container, in this case it’s in the child of a flex container). In “.content-lines” add align-items: center

There’s a lot to flexbox but basically how it works is, you set the parent container to be a flex container (with display: flex, and then on that same parent container you have several options on how to both vertically and horizontally align your direct child containers/elements, as well as whether they should be aligned horizontally (the default) or vertically. So in your case, you want the input and the label to both be vertically centered, but the text input is taller than the p so they aren’t aligned. But if you vertically center them both within their parent container, they will line up. With Flexbox, you only set settings on the child components if you want a specific child to behave in an atypical fashion compared with the rest of the children (for example if you want every 3rd child to align to the bottom instead of the top, there’s a setting for that), but that doesn’t apply in your case.

Edit to add: The tricky thing about flexbox is, the justify-content and align-items commands basically do the same thing, but justify-content is for the parallel axis and align-items for the perpendicular axis. I’m not trying to complicate this, but the reason I can’t say “horizontal axis” and “vertical axis” is because if you set your flex container to “column” (instead of the default “row”) then the parallel axis becomes vertical instead of horizontal. So it depends on how you want the child elements to flow, how you use justify-content and align-items. In your specific case though, you want the items to flow horizontally (which is the default), and you want to center them on the perpendicular axis, which is handled by “align-items: center”.


#6

Omggg. Alrigth THANKS SO MUCH :D! I am procrastinating a bit on that: re-doing certain parts of the curriculum including flexbox. So I’ll have to do that. I’ll put it in my agenda :3!
Thanks again.


#7

I added a bit more to my post above on flexbox. Anyway, I found Flexbox very difficult to comprehend the first time I encountered it (on FCC), and basically ignored it for my first set of projects. But later on, I found a very in depth tutorial, flexbox zombies (still free as far as I know, hopefully it stays that way!), that goes at a bit of a slower pace and uses spaced repetition to really hammer it home. I’m not sure if I can link to other material on here, but I’m sure you’ll find it if you look.


#8

Okk. Thanks a lot! What about this: I re-do the FCC.org CSS Flexbox part of the curriculum and then I head for flexbox zombie tutorial? :smiley: Because I’m really tired of not being as good as I expected at frontend. Not sure how long it should take me to master HTML and CSS.


#9

Is it what you were talking about? https://flexboxzombies.com/p/flexbox-zombies


#10

That’s fine, there’s no “right” way to do it, but be aware: Flexbox Zombies tells you to wait a day after every chapter (except the first), so it takes about 12 days to complete if you do it every day. The first two chapters start you with really basic stuff and it builds on that. So it’s totally possible to do both concurrently, if you feel the need (I didn’t despite not remembering any flexbox when I started it). It’s very well-paced.


#11

Yep. Affirmative. That is correct. (20 character minimum LOL)


#12

Hahaha 20 not under ! :stuck_out_tongue: Thanks for the help and confirmation. I think I’ll finish that Survey make it responsive and then stop the final projects at the first 2 (tribute /survey done) and go back the lessons before practice. I’m getting really annoyed easily which wouldn’t normally happen.