Problema Breezingforms en Modo Responsive  

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

Perdona Jordi. Ahora esta abierto el sitio.

Gracias por tu ayuda

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

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

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

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

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.