Query on Survey Form

Project Feedback
#1

Hello,

Many thanks to FCC forum for helping me out on my very first project “build a tribute page”. I learnt so much while working on it. Now I am on my second project “build a survey form”. There are 2 things I am not able to understand and fix.

  1. Alignment of radio button:- I am trying to get each option on different line. But not able to do so. What should I use to fix it.

  2. Alignment of page for different screen types. My page looks good in full view but goes for a toss when the width is below 1050px. I tried fixing it using media query but not able to do so.

Here is link to my code:-

https://codepen.io/agrawalparul2/pen/RwGwymL

#2
  1. Give some styles to your form element :- specify the width, padding, margin, etc
  2. After you give width to your form, make the width of your input fields to be 100% so that it’ll be same as the width of your form.
  3. For your radio buttons, add a combined class to your radios and give width of 100% and text-align left…
  4. use view port to make your form to cover full page.

There are some improvements to be made, so I’d suggest look take reference given by FCC on the survey form (don’t totally copy)…just use those ideas and do a lot of googling on how to build specific part of the page. :slightly_smiling_face:

#3

HI @agrawalparul2!

For the radio buttons I would suggest wrapping the labels around the inputs like it was taught in this lesson.

Then you can create a class for each label and use flexbox to arrange them how you like. This is one way you could do that.

.radio-btns {
  display:flex;
  align-items:center;
  margin:10px 0;
}

styling radio btns
styling radio btns698×510 44.1 KB

#4

Thanks. But why does it still looks little un-aligned.
image

To align other things I used relative position to parent and it worked well.

#5

The difference is that I created a class for each of the labels and as result it applied the same styles for all of the radio buttons.

You had created an id for each label and used display flex for each id.

Hope that makes sense.

#6

What you did was apply the style jwilkins.oboe gave you to each id in the input element.
You also gave that same style to each id in the label element but you skipped doing it for the Gynaecologist one. That’s why it’s off.

#7

Am I correct when I say - I should always use class when I need same formatting for multiple elements.

1 Like
#8

For id’s you are only able to style one HTML element, whereas a class selector can stylize more than one element.

Classes are also great if you want to cut down on unnecessary repetition.

So instead of this

#bluetext1 {
color:blue;
}

#bluetext2 {
color:blue;
}

#bluetext3 {
color:blue;
}

I could just write this and apply this class to multiple elements.

.blue-text {
color:blue;
}

I am not saying never use ids but it really just depends on the situation.

Hope that helps!

#9

Thanks so much for detailed explanation.

1 Like
#10

No worries!

I am still a beginner too (5 months in) and there is a lot to learn and remember :grinning_face_with_smiling_eyes:

#11