form en responsive y pc

arqrym · #1 (**permalink**) 06/04/2014, 04:30

Buenas estoy haciendo un sitio responsive y en la que en la version PC tengo 2 div al 50 % derecha e izquierda y cuando paso a la versión móvil uno pasa encima del otro al 100% del dispositivo. Todo va bien.
En el de la izquierda tengo un form y todo va bien, pero cuando en móvil le doy para introducir datos en form digamos que vuelve a la versión PC, es decir se convierte dos div uno al lado del otro...
No tengo ni idea por qué me pasa esto pero estoy probando todo tipo de cosas y no doy con la clave..Estoy un poco bloqueado con este tema..

Espero que alguien me haga ver un poco la luz..

Gracias de antemano

pzin · #2 (**permalink**) 06/04/2014, 15:38

Raro suena. ¿Y el código o el sitio web cuáles son?

arqrym · #3 (**permalink**) 08/04/2014, 03:45

Gracias pzin por la respuesta:

Código HTML:

<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/contacto_form_4.css" rel="stylesheet" type="text/css">
<style type="text/css">
body{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;	
	
	}
.contacto_global {
	width: 100%;		
	margin-left:auto;
	margin-right:auto;
	margin-top:2%;		
}

 .formulario {
	width: 50%;
	float: left;
	height:400px;
	
	
	}
	
 .mapaysituacion {
	width: 50%;
	
	float: left;
	
	height:400px;
	}
	



@media screen and (orientation:portrait) and (max-width:533px){
	

	
	.contacto_global {
	width: 95%;	  
	
			
}

.formulario {
	width: 100%;
	background-color: rgba(168,30,32,1.00);	
	
	
	}
	

	
 .mapaysituacion {
	width: 100%;
	background-color: rgba(51,7,8,1.00);	
	
	
	
	}
	}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>
<div class="contacto_global">
<div class="formulario">
<div id="form_new">
<form>
<table width="">
  <tr>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td><input type="text"></td>
  </tr>
</table>


</form>
</div>
</div>

<div class="mapaysituacion">



</div>

</div>
</body>

Acabo de hacer la prueba en mi móvil, android y google crhome y al intentar escribir en la caja de texto se me pasa a 50% de la configuración pc. He puesto color cuando está en móvil y sin color en pc para que se muestre bien lo que digo.

Saludos y a ver qué estoy haciendo mal..

Gracias de antemano

pzin · #4 (**permalink**) 08/04/2014, 08:40

Pues probando ese código no pasa nada de eso. Probé en sobremesa, móvil y tableta.

arqrym · #5 (**permalink**) 08/04/2014, 10:35

Muchas gracias...
Es raro, a mi me pasa cuando le doy para ingresar en el input y me salta el teclado táctil..Es raro..No te pasa a ti??
Se me escapa qué puede ser..

arqrym · #6 (**permalink**) 12/04/2014, 02:35

Vuelvo a poner este código y en mi móvil al intentar escribir en la caja de texto, me pierde la configuración del mediaqueries para esa resolcuión y pasa a la global..

Al entrar me sale el fondo en rojo y al darle al input me pasa a gris, es decir pierde el media para el dispositivo. Es una cosa muy rara. Tengo Android 4.3 en un S4.
No se si es el momento que salta el teclado para escribir pierde la resolución pero me tiene un poco loco el tema..

Espero que alguien pueda probarlo, y que me diga..

Código HTML:

<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">


.prueba_movil{
	position:absolute;
	margin-top:20px;
	width:80%;
	height:300px;
	background-color:#c3c3c3;}
	
@media screen and (orientation:portrait) and (max-width:533px){
	.prueba_movil{	
	width:100%;
	
	background-color:#D38B8C;}
	}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>

<div class="prueba_movil">
  <form>
  <input type="text">
  </form></div>

</body>

Muchísimas gracias de antemano...
Saludos

pzin · #7 (**permalink**) 12/04/2014, 10:05

Pues en iOS no pasa, que es el único sitio donde puedo comprobarlo, ya que en la emulación de Chrome no pasa nada tampoco —aunque no es algo fiable para estas cosas concretas.

De todas formas, la posición esa absoluta es un poco extraña en ese contexto.