unable to make one column in css grid

user_5104452 0
Viewed 115

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>

css-grid css html
1 Answers

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

user_86203330
Related