How to Make a Simple HTML Form Responsive with Native CSS?

Question

Good guys, I went for a job interview and asked me to develop a simple form with label and input and a textarea, only this form has to be responsive, and work on all types of devices.

I started doing, follow the HTML code

HTML

.formContato textarea {
  resize: none;
}

.formContato label {
   vertical-align:top;
}

<div class="container">
  <form class="formContato">
  
    <div>
      <label>Nome:</label>
      <input type="text">
    </div>
    
    <div>
      <label>E-mail:</label>
      <input type="email">
    </div>
    
    <div>
      <label>Mensagem:</label>
      <textarea></textarea>
    </div>
  
  </form>

</div>

I’m having trouble making it responsive, can anyone tell me how to do that? (Using only native CSS)

Answer 1

You can use the famous "viewport" to make this improvement, but you can stay the way you don’t want to. Try to define the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

A viewport provides instructions to the browser on how to control page dimensions and resizing.

To width=device-width sets the page width to follow the screen width of the device (which varies depending on the device).

To initial-scale=1.0 sets the initial zoom level when the page is first loaded by the browser.

If you prefer, you can make it responsive, manually with CSS:

    /* Estilos para celulares de no máximo 176 x 220*/
@media all and (max-width: 319px) {

    /*aqui vai o css*/

}



/* Estilos para celulares principais - 320 x 568*/
@media all and (min-width: 320px) and (max-width: 532px) {

    /*aqui vai o css*/

}



/* Estilos para tablet de no mínimo 533 x 853*/

@media all and (min-width: 533px) and (max-width: 800px) {

    /*aqui vai o css*/

}



/* Estilos para desktop/notebook a partir de 801*/

@media all and (min-width: 801px) {

    /*aqui vai o css*/

}

So you will do the settings manually, (responsive 0, in the nail), if you want to do something fast, do not have time, use the "viewport".

That’s it, I don’t know if I can help you, but I hope so!