My burrons are breaking my page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I’m currently working on making a survey form but using input (radio or checkbox) as i been a nightmare for me, i can’t figure out why its taking the all width of my form.

Your code so far

\ file: 
<main id="main">
  <head>  
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
  </head>

  <body id="body">

    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve the platform</p>
    
    <div id="survey-container">
      <form id="survey-form">
        <div class="form-group">
          <label for="name" id="name-label">Name</label>
          <input type="text" id="name" class="form-control" placeholder="Enter your name" required>
        </div>
        <div class="form-group">
          <label for="email" id="email-label">Email</label>
          <input type="email" id="email" class="form-control" placeholder="Enter your email" required>
        </div>
        <div class="form-group">
          <label for="age">
            Age
          <span class="age-spanclass">(optional)</span>
        </label>
          <input type="number" name="age" id="age" min="10" max="99">
        </div>
        <div class="form-group">
          <label for="role">Which option best describes your current role?</label>
          <select name="role" id="role" class="form-control" required>
            <option disabled selected value>Select current role</option>
            <option value="Student">Student</option>
            <option value="Full Time Job">Full Time Job</option>
            <option value="Full Time Learner">Full Time Learner</option>
            <option value="preferNo">Prefer not to say</option>
            <option value="other">Other</option>
          </select>
        </div>
        <div class="form-group">
          <label for="recommend">Would you recommend freeCodeCamp to a friend?</label>
          <label for="definetely">
            <input id="radioDEF" type="radio" value="definetely" name="user-recommend" class="input-radio" checked> Definetely  </label>
          <label for="Maybe">
            <input type="radio" value="maybe" name="user-recommend" class="input-radio"> Maybe
          </label>
        </div>
        <div class="form-group">
          <label for="favorite">What is your favorite feature of freeCodeCamp?</label>
          <select name="favorite" id="favorite" class="form-control" required>
            <option disabled selected value>Select an option</option>
            <option value="Challenges">Challenges</option>
            <option value="Projects">Projects</option>
            <option value="Community">Community</option>
            <option value="OpenSource">Open Source</option>
        </div>
        <div class="form-group">
          <label for="">What would you like to see improved?</label>
          <label>
            <input type="checkbox" name="prefer" value="FrontEndProjects" class="input-checkbox">Front-end Projects
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="BackEndProjects" class="input-checkbox">Back-end Projects
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="DataVisualization" class="input-checkbox">Data Visualization
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="Challenges" class="input-checkbox">Challenges
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="OpenSourceCommunity" class="input-checkbox">Open Source Community
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="GitterHelpRooms" class="input-checkbox">Gitter help rooms
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="Videos" class="input-checkbox">Videos
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="CityMeetups" class="input-checkbox">City Meetups
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="Wiki" class="input-checkbox">Wiki
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="Forum" class="input-checkbox">Forum
          </label>
          <label for="">
            <input type="checkbox" name="prefer" value="AdditionalCourses" class="input-checkbox">Additional Courses
          </label>
        </div>
        <div class="form-group">
          <label for="">Any comments or suggestions?</label>
          <textarea name="comments" id="comments" class="input-textarea" placeholder="Enter your comment here..."></textarea>
        </div>
        <button type="submit" id="submit" class="submit-button">Submit</button>
      </form>
    </div>

  </body>
</main>
  


\ file: 
#body{
  font-family: "Lato", sans-serif;
  position: flex;
  height: auto;
  width: auto;
  z-index: -1;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#title{
  font-weight: 500;
  text-align: center;
  color: white;
  margin-top: 2.5%;
  margin-bottom: -0.25%;
}
#description{
  color:white; 
  text-align: center;
  font-weight: 200;
  font-style: italic;
  font-size: 25px;
  text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);
}
#survey-container{
  background-color: rgba(27, 27, 50, 0.8);
  width: 50%;
  padding: auto;
  margin: auto;
  font-family: Lato;
  border-radius: 0.25rem;
}
#survey-form{
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1%;
  color: white;
}
.form-control{
  display: block;
  width: 100%;
  height: 2.375rem;
  padding: 0.375rem 0.75rem;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}
input, select{
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  height: 2.375rem;
  border-radius: 0.25rem;
  border: 1px solid #ced4da;
  margin: 0;
  text-align: start;
}
label{
  display: flex;
  font-size: 18px;
  margin-bottom: 0.5rem;
}
.form-group{
  margin: 0 auto 1.25rem auto;
  padding: 0.25rem;
}
.age-spanclass{
  margin-left: 0.25rem;
  font-size: 0.9rem;
  color: rgba(191, 191, 191, 0.5);
}
.input[type="radio"]{
  background-color: initial;
  cursor: default;
  width: 25px;
}
.input-textarea{
  font-family: lato;
  width: 100%;
  min-height: 120px;
  padding: 0.625rem;
  resize: vertical;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36 OPR/85.0.4341.79

Challenge: Build a Survey Form

Link to the challenge:

2

I think the problem is with the width that you have used for the input and select elements. When I remove the width I gets aligned to the left.

1 Like
3

I also noticed that you are not giving the for and the id attributes to the label and input elements respectively.

In case you forgot how to use radio and checkboxes you can go through FreeCodeCamp’s lessons on these.

This is a link to fcc’s lessons on how to create a registration form:

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-forms-by-building-a-registration-form/step-1

Hope this will help you.

4

are you using the freeCodeCamp integrated editor? the css file name is styles.css

5

Sorry for the wait, I didn’t expect such a quick response. And it was the answer, thanks a lot !

1 Like
6

I am using VSCode, when is started the survey form certification their was no integrated editor for it.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.