Fixed Div when shrinking the screen

Question

Fixed Div when shrinking the screen

I am developing the following website:

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

However, when you decrease the screen, the div where the form is is breaking. She needs to be fixed. Help me?

2

html css layout

Author: Flávia Amaral, 2014-07-01

Source

1 answers

score 4 · Accepted Answer

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 your case is to work with percentages.

In this 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 statements remain.}

Result

Screenshot with about 800 pixels of width:

Screenshot about 800 pixels wide