Survey-Form Project -- Need Help Centering Elements

Code Feedback
1

Hi all, I spent five hours looking for the solution to this. Basically, no matter what I try, I just cant get the elements to center evenly on the page: first and foremost the Submit Button and Comments field, but also the first three drop-downs (oddly enough, the last two drop-downs are centered perfectly).

Anyone able to tell me what I am doing wrong? I would greatly appreciate any help I can get!

Here it is in Codepen:

https://codepen.io/piercewillans/pen/XWjaMYE

Thanks a lot in advance to anyone who is able to help me resolve this!

1 Like
2

Hi pierce. I saw your project. Here some suggestions for the next time:

  • Codepen needs just the body content in the HTML section (without body tags). I did the same “error” with my first project.
  • Your code has some mistakes regarding HTML opening and closing tags order (i.e. you first open then and then you close first then . It should be:
<form>
    <main>
        [content]
    </main>
</form>
  • Don’t enclose head and body tags in a div tag. Head tags should be direct child of and it contains all metadata etc.

To answer your question about centering, give .form-group class the text-align: center; proprety. Some errors I noticed are also:

  • In line 36 you missed a “>” symbol before closing label.
  • The last line of your css has an extra bracket “}”. Try CSS Validator to check your stylesheet.

You do this you should fix your project.
Let me know

4

Thanks for your reply, oruamdalo,

I was able to center the Submit Button.

I still would like to center the first three drop-downs (if you look closely, they are not truly centered). And I would like the last two drop-downs (Select Your Learning Preference, Select Your Level of Ability in this Language) to look like the first three in terms of size (they are slightly smaller at the moment).

I have the same class - .form-control - applied to all of them, so they should all be operating under the same CSS rules. Yet that is not what seems to be happening.

I must be missing something.

If I get this done then I will be satisfied (more or less) with how it looks and be ready to submit and move on.

Here is how it looks now:

https://codepen.io/piercewillans/pen/XWjaMYE

Any ideas would be appreciated.

Thanks!

5

I did what you wanted, just to understand if this is what you expect.
Try to understand why I did this.

  • Check the correct order of tags. You are missing tag.
  • tag needs to be direct child of HTML tag, so you don't have to put it in header (Check again in the lessons what header is supposed to do)
  • See again “FlexBox” lectures

Here is my solution. Ask me anything you need.
https://codepen.io/ouramdalo/pen/BaLdGBr

P.S. I noticed you used the “dropdown” id twice. You can do that, but it is best pratice to avoid using twice or more times one id. It is meant to be “unique identifier”, so just use it once. For multiple selection use classes