Survey Help/Feedback

Code Feedback
1

Hey everyone, I’m on my second survey page attempt (first was an ambitious grid-based format that turned into hell) and I’m having a couple of problems I can’t get to the bottom of:

  1. Why won’t my submit button stay still? Have tried multiple css displays and it moves, when scaled, with each of them. Not sure how to go about that using @media.

  2. No matter what I tried, I couldn’t get the radios to line up more to the left like every other option. Any tips?

I’m sure this all comes off as rudimentary and totally dumb, but I appreciate any help/advice that you all are willing to give!

2

if you want to line up the radio buttons just add this css feature
float: left;

but what is your problem with submit button?

1 Like
3

I tried that. It still wasnt lining up.

And the submit button won’t stay still when resized. It floats off the form.

4

1 -
I see that you have an absolute margin on your submit. This means that finding the position is up to you.

#submit {
  margin: 10px;
  margin-left: 500px;
  display: absolute; 
/* There's no display absolute, but position absolute*/
}

If you remove those margins you see that the button will sit at the left-side of its container on a new line, since that is the normal “flow” of the page.

In case you want it centered for example, the easiet way in this case is to wrap the button into a div, set that div to be 100% of the length of the parent, then place the button to the center:

<div style="text-align: center">
 <button />
</div>

Easiest but the least “flexible” choice.

2-

The space comes from the padding that the browsers set by default to ul elements. Simple overwrite it :slight_smile:

side note: the browser inspector is your friend when you want to see what’s actually rendered to the page, and why :slight_smile:

2 Likes
5

Thank you so much! Really appreciate the guidance!

6

Now on the feedback part:

1- Stay consistent

In some part of your form you wrap the label + input in p. In other into a div, in other it’s not wrapped at all.

The more consistent you are, the more “predictable” your layout will be.

2- d.r.y. - Don’t Repeat Yourself

Makes the code more easily manageable.
For example you have the labels and the input style declaration that are the same across multiple fields, and yet you duplicate them because you chose the id instead of using a class.

This means that if later you want to change something you have to manually change it for them all.

1 Like
7

Both valid. For the first one I was taking cues from multiple places (fcc example and a YouTube vid). I’m going to clean that up.

For the repeating, as a part of the challenge we have to use IDs ("name and “name-label”) to pass certain criteria, and you can only use an ID once, if my understanding is correct. How else would I have duplicate the styling of the IDs name and name-label without rewriting them as a class for questions 4-8? Not challenging you because you’re obviously right - just explaining my, likely ignorant, train of thought!

8

Having IDs for input is a common practice, since makes it easier to retrieve user inputs’ values.
However using one does not mean excluding the other.

For example:

.fake-class {
  color: red;
}

<input id="email" class="fake-class" />
<input id="password" class="fake-class" />

And if you are worried about FCC tests, be sure that they will check that said element exists and has a valid ID, but not that that ID also is used in the stylesheet for styling :wink:

Hope it make sense :+1:

1 Like
9

Definitely a spot where I’m messy. Should go back and just use the class “label” then if that’s the case.

Thanks for all your help, Marmiz!