How to Make a Simple Form in Responsive HTML with native CSS?

Question

How to Make a Simple Form in Responsive HTML with native CSS?

Navigation

#1 by (1 votes)

-1

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

I started to do, 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 a hard time making you responsive, can anyone tell me how to do this? (Using only native CSS)

html css

asked by anonymous 30.07.2018 / 23:12

1 answer

LINQ query for object with a sub list An error occurred while performing resource injection in the managed state beanController

score 1 · Accepted Answer

You can use the famous "viewport" to make this improvement, but you can stay the way you do not want to. Try setting 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 scaling.

% w / o sets the width of the page to follow the width of the device screen (which varies depending on the device).

width=device-width sets the initial zoom level when the page is first loaded by the browser.

If you prefer, you can leave 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 make the settings manually, (responsive 0, nail), if you want to do something fast, do not have time, use the "viewport".

That's it, I do not know if I can help you, but I hope so!