Form with CSS

Florence. To create responsive forms you can use a property called a media query. What MDN documentation is

  

Consists of a media type and at least one expression   which limits the scope of style sheets using media features, such as   such as width, height and color. Media queries, added in CSS3, leave   the presentation of content adapted to a specific range of   devices not needing to change the content itself.

Therefore, the media query can be used to change the visual property of an element under certain circumstances.

See this example for a form:

.central {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.form-group {
  padding-bottom: 1.5rem;
  width: 50%;
  display: grid;
}

@media only screen and (max-width: 700px) {
  .form-group {
    width: 100%;
  }
}

.btn {
  background-color: #C8D6E5;
  color: #000000;
  border: none;
  padding: 0.8rem;
  font-size: 1rem;
  font-family: Raleway, sans-serif;
  cursor: pointer;
  text-align: center;
}

<div class="central">
  <form>
    <div class="form-group">
      <label for="name">Nome:</label>
      <input type="text" class="field">
    </div>
    <div class="form-group">
      <label for="email">E-mail:</label>
      <input type="email" class="field">
    </div>
    <div class="form-group">
      <label for="phone">Telefone:</label>
      <input type="text" class="field">
    </div>
    <div class="form-group">
      <label for="subject">Assunto:</label>
      <input type="text" class="field">
    </div>
    <div class="form-group">
      <label for="message">Mensagem:</label>
      <textarea cols="10" rows="8"></textarea>
    </div>
    <input type="button" class="btn btn-success" value="Enviar">
  </form>
</div>

In it we have a div called form-group . This div has 3 CSS properties. Among them one that regulates its size in 50% of% with% "mother". Therefore, it will not take up the entire form.

But if you narrow the page to a certain width you will see that it will not be responsive, or rather not visually pleasing. As the image:

What happens is that div is only 50% of a very small width.

To solve this we use the media query, which according to the example presented above will define that in the width of 700px, or better, when the screen reaches 700px the div div will occupy 100% of the screen, resolving the problem.

This is just a small example of a media query. They can be used for different types of problems and situations.