Problema Breezingforms en Modo Responsive  

 
Raúl Ramón Val
 Raúl Ramón Val
Noble Member

En la web http://www.araweb.es/contacto al reducir la imagen en modo responsive, por ejemplo, a una anchura 400px, la seccion con ID=SeccionContacto no se ajusta al tamaño de la página de breezinforms y se va por la derecha haciendo que se desajuste toda la pantalla de la web en modo responsive..

Pido ayuda ya que he estado intentando cambiar el ancho de la sección pero no me funciona

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 26/01/2015 7:04 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Raúl,,

El sitio web está cerrado por mantenimiento.

El sitio está desactivado por mantenimiento! ¿Cómo lo puedo ver? --> https://www.webempresa.com/blog/modo-mantenimiento-en-wordpress.html

Saludos

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

ResponderCitar
Respondido : 26/01/2015 9:43 am

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

Raúl Ramón Val
 Raúl Ramón Val
Noble Member

Perdona Jordi. Ahora esta abierto el sitio.

Gracias por tu ayuda

ResponderCitar
Respondido : 26/01/2015 9:58 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Raúl,

Creo que es un problema del módulo Reunión en el que hay insertado un script y lo que hace que en resoluciones bajas, los módulos de la izquierda que en un formato responsive se muestran debajo del formulario, se produzca un desbordamiento. Prueba a despublicar ese módulo.

Saludos

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

ResponderCitar
Respondido : 26/01/2015 10:15 am

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

Raúl Ramón Val
 Raúl Ramón Val
Noble Member

Desactivados los dos plugins, parece ser que no es el motivo. Sigue pasando. Creo que el problema esta en las seccion de breezing forms.

Muchas gracias por tu ayuda

ResponderCitar
Respondido : 26/01/2015 10:22 am
Jordi Sala
 Jordi Sala
Miembro Admin

Hola Raúl,

Para estar seguros de que es lo que indicas, procede a desactivar para esa sección todos los módulos que se muestran debajo del formulario.

Saludos

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

ResponderCitar
Respondido : 26/01/2015 10:31 am

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

Raúl Ramón Val
 Raúl Ramón Val
Noble Member

...Desactivados los módulos del sidebar izquierdo. Solo queda breezing forms...Efectivamente creo que el componente que falla es breezingforms

ResponderCitar
Respondido : 26/01/2015 10:45 am
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Revisando los estilos CSS que se están aplicando a los formulario veo que se está forzando un ancho de 300 píxels a los elementos del formulario, lo que provoca el problema que comentas. En concreto, en el archivo templates/flexible_lightmart/css/custom.css veo el siguiente código:

/******Configuracion general de todos los controles del formulario.*/
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario input[type="text"],
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario input[type="text"]:focus,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario input[type="text"]:hover,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario select,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario select:focus,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario select:hover,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario input[type="file"],
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario input[type="file"]:focus,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario input[type="file"]:hover
          {font-family: inherit;background-color:#d1d3d5; border-color:#d1d3d5;color:#7b8188;line-height: 20px;
           padding: 2px 2px;width:300px;max-width:300px;min-width:300px;height: 25px;max-height: 25px;min-height: 25px;}
/*****control label*****/
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario .control-label{background-color:#e6e7e9;color:#7b8188;font-family: inherit;font-size:13px;padding-top:2px;width:25%;padding-bottom:5px;padding-left:0px;margin:0px;}     
/*****control textarea*****/
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario textarea,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario textarea:focus,
.contacto #main #maininner #content .bfQuickMode #bfPage1 #SeccionContacto #SeccionFormulario textarea:hover{
          font-family: inherit;background-color:#d1d3d5; border-color:#d1d3d5;color:#7b8188;line-height: 20px;
          padding: 2px 2px;width:300px;max-width:300px;min-width:300px;height:125px;max-height: 125px;}

Si te fijas, aquí estás poniendo esto:

max-width:300px;min-width:300px;

Es decir, le dices que el ancho máximo y mínimo de los elementos de formulario es 300 píxels. Tendriás que cambiar esto por lo siguiente:

max-width:100%;

Es decir, decirle que el ancho máximo sería del 100% (puede que tengas que probar otros valores) y no fijarle un ancho mínimo, ya que ya le estás diciendo el ancho de 300 píxels con la propiedad width.

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

ResponderCitar
Respondido : 26/01/2015 11:39 am

Cursos Gratuitos WordPress

Por favor Iniciar Sesión o Registro