Build a Survey Form - Problems with positioning elements - Please help

Back End Help
#1

Tell us what’s happening:
Hey everyone!
I’m currently working on the survey project. I haven’t included all the user stories yet and the page is not yet optimized for smaller screens, but that’s not my problem at the moment.
I was wondering how I can arrange the input fields to be in a column so that they all start on one vertical line? I’m really stuck here. I hope you guys understand what I mean.
Help would be appreciated!

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

#2

Hi, if you are looking to make the input fields more predictable to position you could add

.input-field {
  display: block;
/* more rules */

You would also need to add the same rule for select , that might give you a starting point.

After that you could probably explore using CSS Flexbox or CSS Grid to position the other items where you want them. That approach will probably also help when you want to work on optimizing for smaller screens.

Hope that gives you a start and gets you unstuck :slight_smile:

#3

Thank you for your help!
I noticed that I had a typo and thats why the rules of my labels class were not applied. So now everything looks good :slight_smile:

1 Like