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

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

#1

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!


#2

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!


#3

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


#4

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


#5

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:


#6

I am happy to help :smiley: Happy coding!