Sorry for constantly posting so many questions!
I am doing a FCC project for the survey, and I’m having trouble making the radio button and checkbox be side by side with the choices (preferably on the left side.) I’m sure the problem is my use of flexbox, which is a challenge that I am still trying to grasp. 
If anyone can help pinpoint where and what I’m doing wrong, I’d be very appreciative! 
Thank you in advance!
do you want the input or the label to be on the left side?
I had the same issue with this project!
What I did was I added div tags to contain each input and label elements. I added a same class to all of the divs and flex them with css. (display: flex; flex-direction: row; ) << this will bring the input on the left and label on the right. If you want it opposite you can use flex-direction: row-reverse instead.
And then you can change the margins and the good stuffs after.
Hi @edubz!
I would like the input to be on the left, and the label on the right (radio button/checkbox on the left.) 
Hi @ashketchum !
Omg thank you for the explanation and screenshots! 
And I have tried following your advice, but mines came out like this?
I don’t know why I always have so much trouble with flexbox 
Hi KO-d14 
you have set a width:100% to ALL of your input elements, which serves your purpose for the type="text" inputs, but makes your type="radio" ones render on a different line than their respective labels and in this way they’ll never show up side by side.
Give your type="text" inputs a class, so you can style them independently.
You don’t want a width:100% set to your type="radio" inputs…
Then, remove that div with class="align" wrapping around each input/label pairs, because you don’t actually need to use flex-box there, they show up side by side by default 
Hope that helps,
Sam.
try removing input on line 96.
Hi @S4muele !
Yes, it worked! Thank you SO much ! I appreciate that you explained why it initially didn’t work because it helped me understand what I was doing wrong and why, and it’ll be something I can keep in mind for future project codings!
Would it be alright if I ask another question about opacity of my project directly?
Thanks!
-Ko
I’m happy I was of help,
yes sure what about the opacity?
I learned something too! Thank you for sharing!
Thank you
I’d like to learn how to implement the opacity of the survey just like the sample:
FCC Survey Form Base.
I managed to make the background image opaque, but I can’t seem to make the body of the survey opaque without it affecting the contents inside as well. So far I’ve only tried doing the same way I did with the body element by using #main::before (but nothing happened with that), and I’ve simply just tried adding opacity to the body element itself but that was what made the whole content opaque as well 
(i assume this was so because it meant I applied opacity to everything)
Would you happen to know how to make the survey slightly opaque without affect the contents inside? I’d love to learn how to do this!
Thank you in advance 
Hi mate and sorry for the late reply,
the way I did it, I set a background-image to my main <body> element…
Here’s the link to my Pen for that challenge so you can have a look at my code and hopefully that will be of help:
https://codepen.io/S4amuele/full/VwmVJzX
It’s not my best work, but I’m still learning as well
Happy coding mate
Hi @S4muele
No problem! Life happens as I was late to responding myself. 
Your survey page came out beautifully! And again no problem, we’re all just trying to learn how to code.
Also, I liked how clear your comments were It’s very understandable for anyone who’s to look at your code! With your help, I was able to make my background for the form transparent as well!
Thank you and happy coding!
-KO
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
