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 =)