Como hacer que la imagen del widget de imagen deslizante conserve sus dimensiones

  • Profile Image
    misscupcakes
    Asked on July 06, 2020 at 02:11 PM

    Qué tal? cuando utilizo ese widget subo la imagen pero no se respetan las dimensiones (no tiene la opción de candado), en pantalla de computador se ve bien pero en la pantalla de móvil se ve estirado.

    1594058956Captura de pantalla (201).png1594058899Captura de pantalla (205).png1594058935Captura de pantalla (204).png

  • Profile Image
    FelipeSantana
    Answered on July 06, 2020 at 04:04 PM

    Hola @misscupcakes,

    Si desea que el Image Slider Widget tenga capacidad de respuesta móvill, deberá insertar código CSS en el widget. 

    Aquí hay una captura de pantalla para demostrar dónde puede insertar el CSS

    1594065623Screenshot (321).png

    Puede probar el siguiente código CSS en su widget y háganos saber si funciona para usted.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

    img.form-image {

        max-width: 100%;

        height: auto;

    }

  • Profile Image
    FelipeSantana
    Answered on July 06, 2020 at 04:08 PM

    Corrección, utilice el siguiente CSS

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

        li#id_124 {

            max-width: 100%;

            height: auto;

        }

    }

  • Profile Image
    misscupcakes
    Answered on July 06, 2020 at 04:19 PM

    Hola, gracias por la información, la probé pero sigue apareciendo igual :(

    1594066743Captura de pantalla (208).png

  • Profile Image
    FelipeSantana
    Answered on July 06, 2020 at 04:58 PM

    Gracias por informar el resultado de su prueba.

    Puede probar el siguiente código.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    img{

        width: 100% !Important;

        height: auto !important;

    }

    .slidesjs-container,.slidesjs-control{

        height: 260px !important;

    }

    }

  • Profile Image
    misscupcakes
    Answered on July 06, 2020 at 05:04 PM

    Funcionó perfecto! muchas gracias :)

  • Profile Image
    misscupcakes
    Answered on July 07, 2020 at 02:08 PM

    Hola! me di cuenta que queda un espacio en blanco solo en la vista de móvil (no en la desktop) pero no quiero mover el código para no arruinarlo. Cómo podría eliminar ese espacio? Gracias!


  • Profile Image
    FelipeSantana
    Answered on July 07, 2020 at 03:20 PM

    Hola, gracias por notificarnos el problema.

    Puedo ver el espacio en blanco desde mi teléfono móvil.

    Para eliminar el espacio en blanco, deberá ingresar más CSS directamente en el formulario. How-to-Inject-Custom-CSS-Codes

    Puede dejar el código en el widget como está y solo agregar el siguiente CSS en el formulario.

    #id_124 {

        height: 100px !important;

    }

  • Profile Image
    misscupcakes
    Answered on July 07, 2020 at 11:15 PM

    Hola, gracias, lo intenté pero me sigue apareciendo el espacio.

  • Profile Image
    BDAVID
    Answered on July 08, 2020 at 08:18 AM

    Buen día, por favor intente agregar el siguiente código al CSS general del formulario: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    #customFieldFrame_124{

        height: 100px !Important;

    }

    }

    Resultado:

    1594210713resultado.png

  • Profile Image
    misscupcakes
    Answered on July 08, 2020 at 02:40 PM

    Muchas gracias, me funcionó bien, pero cuando traté de replicarlo en este otro formulario que es muy similar no me dejó, hay algún código que deba cambiar? 

    Gracias!

    https://form.jotform.com/misscupcakes/hoy

  • Profile Image
    FelipeSantana
    Answered on July 08, 2020 at 04:05 PM

    Parece que el código CSS que está en su nuevo formulario tiene varios errores.

    Consulte el siguiente viedo para ver cómo eliminar estos errores.

    1594238428missCupcakesCSSErrors.gif

    Después de eliminar los errores, agregue el siguiente codigo e intente nuevamente su formulario y avísenos si el problema persiste.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    #customFieldFrame_124{

        height: 100px !Important;

    }

    }

  • Profile Image
    misscupcakes
    Answered on July 08, 2020 at 10:04 PM

    Funcionó perfecto, gracias!

  • Profile Image
    misscupcakes
    Answered on August 12, 2020 at 02:29 PM

    Hola, traté de replicarlo en otro formulario pero sigue apareciendo ese espacio en la versión web, qué código tendría que colocar? Gracias!


    https://www.jotform.com/build/201688662063661

  • Profile Image
    Carlos_C
    Answered on August 12, 2020 at 03:06 PM

    Hola,

    Gracias por su mensaje.

    En este caso, por favor agregue el siguiente código a su formulario:

    #id_140{

      margin-bottom: -128px!Important;

    }

    También agregue la llave de cierre que faltaba en su código para evitar inconvenientes.

    Si necesita más ayuda, háganos saber. Estaremos encantados de ayudar.

  • Profile Image
    misscupcakes
    Answered on August 12, 2020 at 04:57 PM

    Hola! ahora me aparece un espacio menor en la versión celular pero la imagen se acorta en la versión web.

    1597265829Captura de pantalla (289).png


    1597265857Captura de pantalla (290).png

  • Profile Image
    Carlos_C
    Answered on August 12, 2020 at 06:03 PM

    Hola,

    Al parecer es un inconveniente con el preview de el constructor de Jotform, pero el form funciona sin problemas en el navegador del teléfono y el escritorio.

    Si necesita más ayuda, háganos saber. Estaremos encantados de ayudar.