Un usuario preguntó 👇
Hola.
Quiero crear dos versiones de un formulario, una para escritorio y otra para dispositivos móviles. Los campos son los mismos, pero trabajaré en CSS para optimizarlos para ambos tipos de dispositivos.
Intenté aplicar CSS @mediascreen al campo «Personalizar diseño de formulario», pero definitivamente estoy equivocado en algo. Creo que son funciones fáciles, pero realmente soy un novato.
¿Podrías ayudarme con eso?
¡Gracias por adelantado!
(@upiria)
Hace 1 año, 10 meses
De acuerdo, en este momento, he resuelto para dispositivos móviles:
/ * Solo móvil * / @media una pantalla y (ancho máximo: 480px) {.cp_cff_clean #fbuilder {display: block; }}
@media solo pantalla y (ancho mínimo: 481px) {.cp_cff_clean #fbuilder {display: none; }}
Para computadoras de escritorio y tabletas, no puedo reutilizar el mismo resultado. Me siento un poco tonto, lo admito. ^^
(@codepeople)
Hace 1 año, 10 meses
Hola @upyria
Los estilos a aplicar dependen del resultado que se desee obtener. Los estilos de su ticket solo muestran / ocultan los formularios según el tamaño de la pantalla.
Describa en detalle las modificaciones que desea implementar.
Todo lo mejor.
(@upiria)
Hace 1 año, 10 meses
Hola Codepeople y gracias por la respuesta.
Es lo correcto que quiero. Creo un formulario, lo clono. Quiero que el primero aparezca en el móvil. Este último en una computadora de escritorio y una tableta.
Con el CSS explícito anterior, obtengo el móvil. Pero revirtiendo la condición de «bloqueo» / «no» no puedo lograr mi objetivo.
Donde me equivoco
(@codepeople)
Hace 1 año, 10 meses
Hola @upyria
No sé por qué necesita crear dos formularios diferentes para usarlos en teléfonos móviles y computadoras de escritorio, sin embargo, si ha creado dos formularios diferentes, la solución sería a nivel de página. Por ejemplo, asumiendo que los atajos correspondientes son:
[CP_CALCULATED_FIELDS id="123"]
y
[CP_CALCULATED_FIELDS id="987"]
Insértelos en su propia etiqueta div correspondiente con un nombre de clase diferente:
<div class="form-in-desktop">[CP_CALCULATED_FIELDS id="123"]</div>
<div class="form-in-mobile">[CP_CALCULATED_FIELDS id="987"]</div>
y luego puede definir los estilos para mostrar / ocultar el div del contenedor:
@media only screen and (max-width: 480px) {
.form-in-mobile{display: block;}
.form-in-desktop{display: none;}
}
@media only screen and (min-width: 480px) {
.form-in-mobile{display: none;}
.form-in-desktop{display: block;}
}
Todo lo mejor.
(@upiria)
Hace 1 año, 10 meses
Hola, @codepeople y gracias por la pista.
Puse el atajo en el «Elemento» del Bloque Gutenberg. ¿Tengo que usar Gutenberg Block “HTML” para insertar la etiqueta div?
Estoy un poco confundido.
(@codepeople)
Hace 1 año, 10 meses
Hola @upyria
Si está utilizando el editor de Gutenberg, es aún más fácil, en el atributo «Atributos adicionales» en el bloque, ingrese el atributo de clase con el nombre de la clase: class="form-in-desktop"
y para la segunda forma: class="form-in-mobile"
y luego, defina ambos estilos como he descrito anteriormente.
Todo lo mejor.
(@upiria)
Hace 1 año, 10 meses
¡Guau … objetivo logrado!
¡¡¡Con el DIV funciona bien !!!
Muchas gracias. ^^
Excelente plugin !!!
¿Solucionó tu problema??
0 / 0