Making the slider widget mobile responsive.

  • Profile Image
    ahdach
    Asked on November 14, 2017 at 05:36 AM

    Hi,

     

    I'm trying to make this forms (https://eu.jotform.com/build/73155487907366) slider mobile responsive.

     

    I've added the mobile responsive widget to the form and added this css at the end of the forms CSS.

     

    But its not working. The images are rendered as squares... not preserving the original image ratio...

     

    Thanks for your precious help!

    M

     

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

     

    .custom-field-frame,

     

    .slidesjs-container,

     

    .slidesjs-control {

     

        width: 100% !important;

     

    }

     

    }

     

  • Profile Image
    Chriistian
    Answered on November 14, 2017 at 09:04 AM

    The slider appears fine on my end.

    1510668144slider in mobile.gif

    What device are you using? Is the form embedded on your page?

    Please also try clearing your browser cache and see if that solves the problem.

  • Profile Image
    ahdach
    Answered on November 14, 2017 at 09:58 AM

    Iphone 5S.

    It squares the images. I have the impression it first shows them right for a few miliseconds and then squares them.

  • Profile Image
    TREVON
    Answered on November 14, 2017 at 11:48 AM

    Thank you for contacting us. I hope when you say it squares the image you mean is that is stretches the image as shown below.

    1510677700Iphone S simulation.gif

    I have managed to fix the error by inserting height:100%; in the css you provided as shown below:

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


     .custom-field-frame,

     .slidesjs-container,


     .slidesjs-control {



        width: 100% !important;

        height: 100% !important;

           }



    }

    This is how it displays now

    1510678046Iphone S simulation fixed.gif

  • Profile Image
    ahdach
    Answered on November 14, 2017 at 01:00 PM

    Fixed!

    Thanks!