Web responsive Formulario login de acceso. Alguien me puede ayudar?

[franxudj]

Hola! Soy novato aquí y vengo buscando ayuda para algo que me está volviendo loco.

Estoy empezando con esto del diseño web y todavía no me manejo con el diseño responsive.
Estoy rediseñando una página principal a partir de una plantilla responsive que trae HTML, CSS y algo de Javascript.

El caso es que le he añadido un formulario para hacer un login con lo inputs de Usuario y Password en horizontal y se ven de la siguiente forma:

Con un ancho de 2000 px la ventana


Reduciendo el ancho de la ventana, cuando baja de los 1240 px se muestra un poco más abajo


Y el problema más gordo viene cuando el valor ancho de la ventana se pone por debajo de los 750 px, ya que se apila todo el formulario en lugar de quedarse horizontal


El responsive está hecho enlazando a distintos CSS de la forma: <link rel="stylesheet" id="max-width-1024-css" href="css/max-width-1024.css" type="text/css" media="screen and (max-width: 1240px)" />
Así con los tamaños 1240px, 987px, 480px y 320px.

Os dejo por aquí el código del formulario:


Y el form en el CSS es un pelín largo, así que lo pego aquí:
/* === LOGIN FORM */
label {
display: block;
color: #999;
}
.cf:before,
.cf:after {
content: "";
display: table;
}

.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
:focus {
outline: 0;
}
.loginform {
/*width: 290px;*/
height: 20px;
margin: 0px auto;
padding: 25px;
background-color: rgba(250,250,250,0.5);
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2),
inset 0px 1px 0px 0px rgba(250, 250, 250, 0.5);
border: 1px solid rgba(0, 0, 0, 0.3);
font-size:1px;
float:right;
padding-top:1%;
padding-bottom:2.3%;
padding-right:1%;
padding-left:2%;
margin-top:1.5%;
}
.loginform ul {
padding: 0;
margin: 0;
display: inline;
}

.loginform ul[style] {
list-style-type:none !important;
}
.loginform li {
display: inline;
float: left;
}
.loginform input:not([type=submit]) {
padding: 5px;
margin-right: 10px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;
}
.loginform input[type=submit] {
border: 1px solid rgba(0, 0, 0, 0.3);
background: #64c8ef; /* Old browsers */
background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #64c8ef 0%,#00a2e2 100%); /* IE10+ */
background: linear-gradient(to bottom, #64c8ef 0%,#00a2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */
color: #fff;
padding: 5px 15px;
margin-right: 0px;
margin-top: 0px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
}


Llevo varios días pateandome Google buscando una solución, pero no he dado con nada efectivo.

Espero que alguien me pueda echar un cable.
Gracias de antemano =)

[franciscomarin]

Tendrás que decirle al CSS que cuando la resolución de pantalla sea menos de X (cuando el formulario pase a varias filas) el alto de ese div pase a lo que necesites.

[franxudj]

Iniciado por franciscomarin

Tendrás que decirle al CSS que cuando la resolución de pantalla sea menos de X (cuando el formulario pase a varias filas) el alto de ese div pase a lo que necesites.

Gracias por la respuesta =)

En verdad no se me había pasado por la cabeza lo de controlar el alto. Aun así si me pudieras aclarar mejor como hacerlo te lo agradecería, ya que no se bien como hacerlo, y si debo hacerlo en el CSS principal o en el que tira de él cuando el max-width es 768px

Gracias de nuevo

[fede5426]

No entiendo por que se te apilan si el contenedor sigue teniendo el mismo ancho, si le sacas el "height" a la clase .loginform, el contenido va a quedar siempre dentro del contenedor porque no le estas asignando un alto. Pero no entiendo por que se te amontona si tiene un ancho fijo.
También veo que tiene margenes "0 auto", y está a la derecha de la pantalla.. calculo que esto tiene que ver con estilos que le diste al contenedor padre.