Fixed Div when decreasing the screen

Question

I’m developing the following website:

 http://173.44.46.62/~bellanap/pedidos.php

but when you lower the screen, the div where the form is breaking. It needs to be fixed. Help me?

Answer 1

In order for your elements to respond to the width of the screen, you have to work with units of measurement based on it. The most practical thing for you is to work with percentages.

In this practical case, you should change the fixed pixel widths you have in the elements below to the following percentage values:

CSS

.main{
  width:50%;                          /* estava 925px */
}
.formulario{
  width:82%;                          /* estava 720px */
}
.input{
  width:100%;                         /* estava 720px */
}
.input-tel-email{
  width:46%;                          /* estava 340px */
}
textarea{
  width:100%;
}

^{All other declarations remain.}

Upshot

Screenshot with about 800 pixels wide: