Avisos
Vaciar todo

CSS Contact Form 7

6 Respuestas
3 Usuarios
0 Reacciones
1,167 Visitas
Julio
Respuestas: 85
Trusted Member
Topic starter
 

Hola!

Tengo este formulario hecho con CSS, pero me gustaría que para dispositivos móviles se mostrase solo en una columna.

http://irlanda.quierogroup.webfactional.com/pedir-presupuesto/

Por favor, ¿me podríais decir que CSS ponerle que no estoy dando con la tecla?

Mil gracias por la ayuda!

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 06/02/2017 12:46 pm
Pepe
 Pepe
Respuestas: 42532
Illustrious Member
 

Hola Julio.

No conseguí ver que archivo es el que maneja el código ya que parece que carga en cache pero bueno básicamente seria añadir lo siguiente:

@media (max-width: 600px) {

#right {
    float:none;
}
}

Un saludo


 
Respondido : 06/02/2017 2:08 pm
Julio
Respuestas: 85
Trusted Member
Topic starter
 

Hola Pepe,

Lo puse pero no funciona tal como puedes comprobar...

El código del formulario es este:

/*--- 2 Column Form Styles Start ---*/

#left {
width: 47%;
float: left;
border: 2px solid #fff;
background-color: #fff;
padding-left: 3%;
padding: 20px;
}

#right {
width: 47%;
float: left;
/* margin-right: 6%; */
border: 2px solid #fff;
background-color: #cccccc;
padding-right: 3%;
padding: 20px;
}

.clearfix:after {
content:"020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}

.clearfix {
display:block;
}

A ver si lo conseguimos!

Gracias!


 
Respondido : 06/02/2017 2:16 pm
Julio
Respuestas: 85
Trusted Member
Topic starter
 

Hola de nuevo,

alguien pudo ver ésto por favor?

Gracias!


 
Respondido : 06/02/2017 4:48 pm
Jhon
 Jhon
Respuestas: 44954
Illustrious Member Moderator
 

Hola

Prueba con el siguiente código al final de tu archivo style.css de tu theme

@media(max-width:678px){
	.wpcf7-form #right,
	.wpcf7-form #left{
	width:100%;
	}
}

Lo que hace el código es forzar el ancho a 100% cuando el ancho del dispositivo sea menor o igual a 678px

Saludos.


 
Respondido : 06/02/2017 9:44 pm
Julio
Respuestas: 85
Trusted Member
Topic starter
 

Muchas gracias, funciona perfectamente!


 
Respondido : 07/02/2017 9:44 am