Survey Form Feedback Pls (need help w/ Submit button)

Please see below for the Survey Form that I made. Your feedback is much appreciated!
https://codepen.io/henryliou/pen/NOqoBa

I can’t change the way my Submit button looks. You can see that I already have an id named submit, but the padding and font-size commands are not working…

Also, for the “Gender” section of the survey, I would like everything to be in one line. How may I do that? I’m currently using grid-template-columns, but I don’t really understand how it works… LOL!

Thanks in advance for your time!

Hey there,

Can you elaborate what do you mean by not working

Paste this code and see its working fine

#submit{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10px;
  margin-top:10px;
  padding-left: 15px;
  padding-right:15px;
  padding-top:5px;
  padding-bottom:5px;
  font-size: 20px;
  color:#ffa860;
  border: 4px solid;
  border-color:#ffa860;
  border-radius:50px;
  background-color: white;
}

Also <input> tag is self closing so there is no need to put </input>

<div> is a block element means “A block-level element always starts on a new line and takes up the full width available”, so if you want your <label> and radio inputs in a single line wrap inpits in <span> instead "The <span> tag is used to group inline-elements in a document"

  <div class="container">
      <label class="containerleft">Gender:</label>
      <span class="gendercontainer">
        <input type="radio" name="gender" value="male">Male 
        <input type="radio" name="gender" value="female">Female  
      </span>
  </div> 

.gendercontainer{
  background-color: white;
  padding: 5px;
}

For the grid part, you don’t need it for now. I would suggest first understand grid properly, start with small examples , then use grid in your projects when needed.

OverAll your pages looks nice, I really like the colors :slightly_smiling_face: happy coding!

Thank you for pointing that out. I have fixed my code accordingly.

The span tag is exactly what I was looking for! Don’t remember coming across it in the FCC curriculum… THANK YOU!

As for the Submit button, I copy and pasted your code, and it did change the way the button looks. Below is a picture of it. However, I don’t understand why would my original code not work? I have my font-size at 400px and padding at 100px, and the button is still small…

43%20AM

1 Like

It shows fine for me, Its font size is 400px see:


I am using chrome,what browser are you using.
Upload the screenshot how you see it

That’s one gigantic “Submit” button. LOL! Good to know that at least it works for you.
I’m using Chrome too.
59%20PM

Below is how the Submit button appears on my Chrome browser:
56%20PM

Anyway, it is good to know that I’m not doing something wrong. I tried opening the page with Firefox and it showed up fine. Thank you so much @ridafatima15h1 Much appreciated! :grinning:

1 Like

I am happy to help :smiley: Happy coding!