CSS Contact Form 7  

 
Julio
Trusted Member

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
Miembro Moderator

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

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

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Julio
Trusted Member

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
Trusted Member

Hola de nuevo,

alguien pudo ver ésto por favor?

Gracias!

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

Cursos Gratuitos WordPress

Jhon Marreros Guzman
Miembro 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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 06/02/2017 9:44 pm
Julio
Trusted Member

Muchas gracias, funciona perfectamente!

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

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

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

Por favor Iniciar Sesión o Registro