I can't make padding for all the elements inside my form

Hi everyone, Joxet here

I’m working on my first certification assignment, the survey form, and I’m looking for a way to space the elements inside the form in css with a group command of some kind. I haven’t found anything on the internet. Would appreciate some help.

Hi!

Please include your code and a link to the assignment. It’s much easier to point you towards code that will achieve this goal if we can see what you are working on.

Oh! I forgot!
Is there any easier way to link html documents than to copy and paste them?

Assignment:

My code:
Html:

<!DOCTYPE html>

<html>
  <head>
    <title>Surveyformsaregood</title>
    <link rel="stylesheet" href="styles.css"
  </head>

  <body>
    <div class="container">
    <h1 id="title">Store survey</h>
    <p id="header-paragraph">We appreciate any feedback from our customers.</p>
    <p id="description"> Please fill out this form:</p>
      <form id="survey-form">
        <label id="name-label">What is your name?<input placeholder="name" required id="name" type="text"/>
        </label>
        <label id="email-label">Enter your email adress:
        <input placeholder="email" required id="email" type="email"/>
        </label>
        <label id="number-label">How many times have you visited our store?
        <input placeholder="number" min="1" max="100" id="number" type="number"/>
    <label>How does our store make you feel?
        <select id="dropdown">
          <option>select option</option>
          <option>frisky</option>
          <option>hungry</option>
          <option>angry</option>
          <option>stylish</option>
        </select>
        </label>
        <div id="radio-buttons">
          <p id="radio-label">When do you typically enter our store?
    </p>
        <label><input type="radio" name="time" value="morning">Morning</label>
        <label>
        <input type="radio" name="time" value="midday">Midday</label>
    <label><input type="radio" name="time" value="afternoon">Afternoon</label>
        </div>

    <label id="checkboxes">
          <p id="checkboxes-label">What parts of the store are you familiar with?</p>
        <label>The vegetable isle<input type="checkbox" value="vegetables"></label>
    <label>The meat isle<input type="checkbox" value="color"></label>
        <label>The electronics isle<input type="checkbox" value="color"></label>
          </label>

        <label id="improve">Do you have any thoughts on how we might improve?<textarea placeholder="Your thoughts here"></textarea>

        <input id="submit" type="submit">
      </form>
    </div>
  </body>
</html>
body{
color: #F56606;
font-family: sans-serif;
background-color: black;
}

.container{
width: 100%;
margin: auto;
max-width: 300px;
background-color: rgba(150,0,75,75%);

}

h1{
  margin-top: 0;
  text-align: center;
  font-size: 
}
p{
  font-size: 25px;
}

#header-paragraph{
  margin-top: 5px;
  font-size: 20px;
  opacity: 75%;
}

#survey-form{
  width: 100%;
  margin: 5px;
  margin-top: -30px;
  font-size: 20px;
}

#name-label{
}
#name{
  display: block;
  width: 95%;
}
#email-label{
  display: block;
}
#email{
  display: block;
  width: 95%;
}
#number-label{
  display: block;
  width: 100%;
}
#number{
  display: block;
  margin-right: auto;
  margin-left: auto;
}
#dropdown{
  display: block;
  margin-right: auto;
  margin-left: auto;
}
#radio-buttons{
  display: inline-block;
  font-size: 15px;
}
#radio-label{
  padding-bottom: 
}
#checkboxes{
  display: block;
}
#improve{
  
}

Thanks for sharing! But before I help with your coding,

If you want to reply directly to people. press the button that says ‘reply’ with the left pointing arrow on it.

That way they get a notification pop up that you have replied. Otherwise they may miss your posts.

I’ve edited your post to format the code so it is readable for the forum.

To format your code, surround it by back ticks, or highlight the pasted code and press the button that looks like this </>. The gif below gives a visual demonstration of both of these.

1 Like

One way is to use codepen.io

This website allows you to create single page draft websites using html/css (and Javascript but you don’t need to worry about that now).

Codepen will only recognise content you would put in the body element as valid. So if you past your freecodecamp assignment into codepen you will get some warnings.

As for how to space all the elements inside your form, look into css classes. A single css class applied to all those elements will allow you to add the same padding to all the elements. Css classes are covered earlier in the course, it may be an idea to go back to those lessons for reference.

I also think you need to go over your html code. I am noticing some syntax mistakes that will cause issues in passing the assignment. Such as incorrectly typed element names and missing closing brackets.

1 Like

Thank you for the feedback, I’ll look into it!

1 Like

So I copied the code into codepen, and it gave one error that said “Just HTML that goes in the <body> goes here.” That error disappeared when I removed <!DOCTYPE html>, and there that was the only error. Did you spot any other syntax errors? I pass all the tests when I run them.

1 Like

Yeah that sounds right for codepen. So long as you restored the <!DOCTYPE html> and any <head> code when you put it back into the freecodecamp editor you should be fine.

If codepen isn’t throwing any errors and you’ve passed the user stories on freecodecamp you should be fine. :slight_smile:

1 Like