Avisos
Vaciar todo

CSS Contact Form 7  

 
Julio
 Julio
Usuario experto

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

Citar
Respondido : 06/02/2017 12:46 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

ResponderCitar
Respondido : 06/02/2017 2:08 pm

Cursos Gratuitos WordPress

Julio
 Julio
Usuario experto

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!

ResponderCitar
Respondido : 06/02/2017 2:16 pm
Julio
 Julio
Usuario experto

Hola de nuevo,

alguien pudo ver ésto por favor?

Gracias!

ResponderCitar
Respondido : 06/02/2017 4:48 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jhon
 Jhon
Soporte CMS Webempresa 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.

ResponderCitar
Respondido : 06/02/2017 9:44 pm
Julio
 Julio
Usuario experto

Muchas gracias, funciona perfectamente!

ResponderCitar
Respondido : 07/02/2017 9:44 am

wpdoctor-revisa-la-salud-de-tu-wordpress