Survey-Form Feedback (positioning problem)

Code Feedback
1

Hey! Here is my survey-form project. https://codepen.io/grimnir/pen/wOGypp
I’ve passed all the tests but I have some problems with the positioning.
I would like the Location and Skills section to be displayed in a horizontal line, not vertical. I’ve been googling and trying various things all day and I didn’t manage to make it work. I’m pretty sure the solution is simple but I can’t figure it out.
Also I would want all the fields to be properly aligned, right now the fields are all over the place in my opinion.
If anyone could help me with these issues I’d be really grateful and I would love to hear some feedback on other improvements I could make.
Thanks!

1 Like
2

hi @radu9
first
for the radio input
you should change the id=“location” for each label of radio input and add id that’s the same as the label’s id
example <label for=“location1”>Los-Angeles</label><input type=“radio” id=“location1”>
for positioning we will fix it together

1 Like
3

hey! thanks, gonna update it right now.

4

any advice on how to better position the elements?

5

hi @Radu9 you should give relative units to width’s value

6

to display a location in horizontal line try this
form > div:nth-child(5) > fieldset{
display:flex;flex-direction:row;
}
form > div:nth-child(5) > fieldset ul li{
display:inline-block;
}

1 Like
7

I am still pretty new to this so I may be wrong but, it looks like you put each of your radio buttons into a list element. I would recommend getting rid of the list elements and putting all the radio buttons into a div. Then use either flexbox or grid in CSS to fix the positioning of the buttons. If someone more experienced can verify this, I would appreciate it.

8

Hi @radu9. The issue couldn’t be written here, so i edited your work Edits.

It’s far from perfect, but i hope this guides you in completing it.

9

Work on the responsiveness and colors!

Good luck, keep up the coding,

  • Tech