unable to make one column in css grid

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I have a survey form project from freecodecamp.org and when the viewport width < 768px I want the css grid to have only one column, but for some strange reason this doesn't happen.

my code

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

add a comment |

I have a survey form project from freecodecamp.org and when the viewport width < 768px I want the css grid to have only one column, but for some strange reason this doesn't happen.

my code

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

add a comment |

I have a survey form project from freecodecamp.org and when the viewport width < 768px I want the css grid to have only one column, but for some strange reason this doesn't happen.

my code

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

I have a survey form project from freecodecamp.org and when the viewport width < 768px I want the css grid to have only one column, but for some strange reason this doesn't happen.

my code

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

html css css3 css-grid

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

edited Nov 17 '18 at 0:24

Temani Afif

83.7k104795

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

asked Nov 16 '18 at 23:27

Ali Faki

1,7813920

add a comment |

1 Answer
1

active

oldest

votes

It's due to the property applied to the button grid-column: 1 / 3; forcing your grid to always be 2 columns at least.

You need to change this inside the media query:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.^ref

A simplified example to better illustrate:

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

For more details:

https://drafts.csswg.org/css-grid/#explicit-grids

https://drafts.csswg.org/css-grid/#implicit-grids

edited Nov 17 '18 at 0:18

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53346682%2funable-to-make-one-column-in-css-grid%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

It's due to the property applied to the button grid-column: 1 / 3; forcing your grid to always be 2 columns at least.

You need to change this inside the media query:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.^ref

A simplified example to better illustrate:

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

For more details:

https://drafts.csswg.org/css-grid/#explicit-grids

https://drafts.csswg.org/css-grid/#implicit-grids

edited Nov 17 '18 at 0:18

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

add a comment |

It's due to the property applied to the button grid-column: 1 / 3; forcing your grid to always be 2 columns at least.

You need to change this inside the media query:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.^ref

A simplified example to better illustrate:

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

For more details:

https://drafts.csswg.org/css-grid/#explicit-grids

https://drafts.csswg.org/css-grid/#implicit-grids

edited Nov 17 '18 at 0:18

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

add a comment |

It's due to the property applied to the button grid-column: 1 / 3; forcing your grid to always be 2 columns at least.

You need to change this inside the media query:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.^ref

A simplified example to better illustrate:

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

For more details:

https://drafts.csswg.org/css-grid/#explicit-grids

https://drafts.csswg.org/css-grid/#implicit-grids

edited Nov 17 '18 at 0:18

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

It's due to the property applied to the button grid-column: 1 / 3; forcing your grid to always be 2 columns at least.

You need to change this inside the media query:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.^ref

A simplified example to better illustrate:

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

For more details:

https://drafts.csswg.org/css-grid/#explicit-grids

https://drafts.csswg.org/css-grid/#implicit-grids

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

body {

  margin: 0;

  padding: 0;

  margin-bottom: 20px;

  font-family: Roboto, sans-serif;

  background-color: #21a6ff;

}



header {

  text-align: center;

  margin-bottom: 50px;

  color: white;

}



form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-gap: 1em;

  background-color: #FAFAFA;

  padding: 20px;

  margin-right: 5%;

  margin-left: 5%;

}



label {

  justify-self: end;

}



.input-field {

  justfy-self: start;

}



ul {

  padding: 0;

  margin: 0;

}



li {

  list-style-type: none;

}



input {

  padding: 5px;

}



select {

  padding: 5px;

}



button {

  padding: 15px;

  background-color: #21a6ff;

  color: white;

  border: none;

  font-size: 17px;

  cursor: pointer;

  border-radius: 50px;

}



.submit-btn {

  grid-column: 1 / 3;

  justify-self: center;

}



@media (max-width: 768px) {

  body {

    background: lightgreen;

  }

  form {

    grid-template-columns: 1fr;

  }

  .submit-btn {

    grid-column: 1;

  }

}

<header>

  <h1 id="title">Developer Survey</h1>

  <p id="description">Let us know you more</p>

</header>



<form id="survey-form" method="POST" action="https://crossorigin.me/https://freecodecamp.com">

  <label for="name" id="name-label">Name</label>

  <input class="input-field" type="text" id="name" placeholder="Enter your name" required>



  <label for="email" id="email-label">Email</label>

  <input class="input-field" type="email" id="email" placeholder="Enter your email" required>



  <label for="number" id="number-label">Age</label>

  <input class="input-field" type="number" id="number" min="1" max="110" placeholder="Enter your age" required>



  <label for="dropdown" id="dropdown-label">Which option best describes your current role?</label>

  <select class="input-field" name="drop" id="dropdown">

    <option value="" disabled selected>Select your option</option>

    <option value="student">student</option>

    <option value="graduate">graduate</option>

    <option value="full-time-job">full time job</option>

    <option value="perfer-not-to-say">perefer not to say</option>

    <option value="other">other</option>

  </select>



  <label for="radios" id="radios-label">do you love javascript?</label>

  <div class="input-field" id="radios">

    <ul>

      <li><label><input type="radio" name="radio" value="1"> Definitely</label></li>

      <li><label><input type="radio" name="radio" value="2"> maybe</label></li>

      <li><label><input type="radio" name="radio" value="3"> not sure</label></li>

    </ul>

  </div>



  <label for="checks" id="checks-label">programming languages that you use</label>

  <div class="input-field" id="checks">

    <ul>

      <li><label><input type="checkbox" name="checkbox" value="1"> Python</label></li>

      <li><label><input type="checkbox" name="checkbox" value="2"> js</label></li>

      <li><label><input type="checkbox" name="checkbox" value="3"> Java</label></li>

      <li><label><input type="checkbox" name="checkbox" value="4"> C++</label></li>

      <li><label><input type="checkbox" name="checkbox" value="5"> C</label></li>

      <li><label><input type="checkbox" name="checkbox" value="6"> Lisp</label></li>

      <li><label><input type="checkbox" name="checkbox" value="7"> Other</label></li>

    </ul>

  </div>



  <label for="more" id="more-label">Any additonal comments?</label>

  <textarea class="input-field" name="more" id="more" style="height:50px;resize:vertical;"></textarea>



  <div class="submit-btn">

    <button id="submit" type="submit">Submit</button>

  </div>

</form>

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

.box {

  display:grid;

  grid-template-columns:50px; /*we explicitly define one column*/

  grid-gap:5px;

}

.box > div:first-child {

  grid-column:1/7; /*this will implicitly create more*/

  background:red;

  height:20px;

}

.box > div {

  background:blue;

  height:20px;

}

<div class="box">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>

edited Nov 17 '18 at 0:18

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

edited Nov 17 '18 at 0:18

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

answered Nov 17 '18 at 0:05

Temani Afif

83.7k104795

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky