Avisos
Vaciar todo

Hosting WordPress 70% dto Dominios promo

Modificar ancho de caja de relleno de datos de facturación en versión móvil  

 
Jesús
 Jesús
Usuario experto

Hola, tengo una plantilla que en la versión escritorio va perfecta pero que a los meses me he dado cuenta que no funciona a la hora de comprar en la versión móvil. El motivo es que los recuadros donde el cliente debe poner sus datos son tan estrechos que no se puede escribir ni introducir dato alguno. Me pregunto si me pueden ayudar a encontrar la hoja de estilo para modificar o comando que debo introducir para modificar ese ancho de 42px que hace imposible rellenar datos en la versión móvil.

Captura de pantalla 2020 11 12 a las 19.18.10

 

Contenido solo visible a usuarios registrados

Citar
Respondido : 12/11/2020 6:18 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Jesus,

Comprueba si con el siguiente código CSS logras modificar de forma correcta el ancho de los campos de formulario de finalizar compra. Debes añadirlo en el apartado Apariencia -> Personalizar -> CSS Adicional

@media only screen and (max-width: 467px) {

.nd_options_customizer_forms input[type="text"], .nd_options_customizer_forms input[type="email"], .nd_options_customizer_forms input[type="url"], .nd_options_customizer_forms input[type="tel"], .nd_options_customizer_forms input[type="number"], .nd_options_customizer_forms input[type="date"], .nd_options_customizer_forms input[type="file"], .nd_options_customizer_forms input[type="password"], .nd_options_customizer_forms select, .nd_options_customizer_forms textarea, .StripeElement {
width: 250px !important;
}
}

Verifica esto y nos comentas como ha ido todo

Un Saludo

ResponderCitar
Respondido : 12/11/2020 7:05 pm

Jesús
 Jesús
Usuario experto
Captura de pantalla 2020 11 12 a las 21.07.12

 

@karen Gracias por tu respuesta. La plantilla en personalización lleva el siguiente código:

@media (min-width: 850px) {
     
      #customer_details,
      #order_review_heading,
      #order_review {
      width: 48%;
      }
     
      #customer_details {
      float: left;
      }
 
     
      #order_review_heading,
      #order_review {
      float: right;
      }
     
      #order_review_heading {
      clear: none;
      padding-top: 0;
      }
      #customer_details .col-1,
      #customer_details .col-2
      { width: 100%;
        float: none; 
        }
 
 
.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 88.333333%;
    flex: 0 0 8.333333%;
    max-width: 100%;
}
.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 6.666667%;
    flex: 0 0 6.666667%;
    max-width: 100%;
}

Al poner debajo tu código la apariencia en la versión móvil sigue igual. Sin embargo, si borro el css que te acabo de mandar y añado el tuyo, en la versión móvil se ve todo perfecto, pero sin embargo en la versión escritorio o de PC (que antes estaba bien) ocurre todo lo que pasaba en la versión móvil, que las cajas son estrechas y no se pueden escribir en ellas. Adjunto pantallazos.

Captura de pantalla 2020 11 12 a las 21.06.06

 

ResponderCitar
Respondido : 12/11/2020 8:08 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Jesús,

En este caso veo que el dominio que nos compartes no se encuentra con nosotros, por políticas del foro no podemos dar soporte a sitios web que no se encuentren alojados en webempresa.

Un Saludo

ResponderCitar
Respondido : 12/11/2020 8:56 pm

Cursos Gratuitos WordPress