Radio buton not well positionned

HTML-CSS
1

Hello,
I would like to position my buttons like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Cours JavaScript</title>
    <meta charset="utf-8" />
    <style>
      .form1 {
        /* display: flex; */
        /* align-items: center; */
      }
      .bouton {
        /* display: inline-block; */
      }
    </style>
  </head>
  <body>
    <div class="form1">
      <input
        id="recommend"
        class="bouton"
        type="radio"
        name="recommend"
      />Definite<br />
      <input
        id="recommend"
        class="bouton"
        type="radio"
        name="recommend"
      />Definite
    </div>
  </body>
</html>

image

But in my code:

<!DOCTYPE html>
<html>
  <head>
    <title>Cours JavaScript</title>
    <meta charset="utf-8" />
    <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=Poppins:wght@100&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        /* position: fixed; */
        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);
        width: 100%;
        height: 100%;
        z-index: -1;
        background-size: cover;
        /* background-position: center;
        background-repeat: no-repeat; */
        font-family: 'Poppins', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
        color: white;
        background-color: darkblue;
        /* margin: 0; */
      }
      #container {
        width: 750px;
        background-color: rgb(241, 210, 157);
        margin: auto;
        padding: 0px;
      }
      input {
        width: 100%;
        margin: 0px;
        padding: 0px;
      }
      #survey-form {
        background-color: blue;
        margin: 40px;
        padding: 30px;
      }
      .div-input {
        margin: 0px 0px 1rem 0px;
      }
      .label-input {
        font-size: 1.1rem;
        height: 50px;
        line-height: 2rem;
      }
      .input-field {
        height: 2.375rem;
        border-radius: 0.25rem;
      }
      #name-label::placeholder {
        /* margin: 10px; */
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      }
      #email-label::placeholder {
        /* margin: 10px; */
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      }
      #number-label::placeholder {
        /* margin: 10px; */
        font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      }
      #dropdown {
        width: 100%;
        height: 2.375rem;
        border-radius: 0.25rem;
        
      }
      .select {
         font-family: 'Poppins', sans-serif;
        padding: 10px;
        color: rgb(5, 5, 5);
        font-size: 0.9rem;
        font-weight: bold;
      }
      select {
        font-family: 'Poppins', sans-serif;
        padding: 5px 10px 5px 10px;
        color: grey;
        font-size: 0.9rem;
        font-weight: bold;
      
      }
      .option {
        font-size: 1.1rem;
        line-height: 0rem;
      }
      #div-select {
        margin-top: 30px;
      }
       /* .form1 {
        display: flex;
        align-items: center;
      }
      .bouton {
        display: inline-block;

      } */
     
    </style>
  </head>

  <body>
    <div id="container">
      <header>
        <h1 id="title">sfsfsff</h1>
        <p id="description"></p>
      </header>
      <form id="survey-form">
        <div class="div-input">
          <label class="label-input" for="name-label">Name</label>
          <input
            class="input-field"
            id="name-label"
            type="text"
            name="name"
            placeholder="Enter your name"
            required
          />
        </div>
        <div class="div-input">
          <label class="label-input" for="email-label">Email</label>
          <input
            class="input-field"
            id="email-label"
            type="email"
            name="email"
            placeholder="Enter your Email"
            required
          />
        </div>
        <div class="div-input">
          <label class="label-input" for="number-label">Age (optional)</label>
          <input
            class="input-field"
            id="number-label"
            type="number"
            name="number"
            placeholder="Enter your Age"
            min="0"
            max="99"
          />
        </div>
        <div id="div-select" class="div-input">
          <p class="option">wich option best describes your current role?</p>
          <label for="dropdown"></label>
          <select 
            id="dropdown"
            name="select"
            required
          >
          <option value="" class="select">Select an option</option>
          <option value="dog" class="select">Designer</option>
          <option value="cat" class="select">coder</option>
          <option value="hamster" class="select">Community Manager</option>
        </div>
        <div class="form1">   
        <input id="recommend" class="bouton" type="radio" name="recommend">Definite
        <input id="recommend" class="bouton" type="radio" name="recommend">Definite
        </div>
      </form>
    </div>
  </body>
</html>

image

What is the problem ?

Your browser information:

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

Challenge: Build a Survey Form

Link to the challenge:

1 Like
2

I guess you just have to remove the 100% width on your radio button

3

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