Is it possible to make images in Image Slider widget responsive?

  • Profile Image
    lancemartin
    Asked on August 19, 2016 at 10:44 PM

    Trying to us the carousel widget which doesn't seem to be responsive and also and have some titles that are images that are also not behaving responsively. Set at 600px wide.  I have found information about inserting below to make images responsive but with no effect.

    Every test I have done seems to show that the forms wont act responsively if an image is placed inside them. Is there a solution?

     

    .form-all:before {

    background-size: 95% auto;

    background-position: center;

    }

     

  • Profile Image
    jonathan
    Answered on August 19, 2016 at 11:11 PM

    Please try the following CSS codes to your form https://www.jotformpro.com/form/62308223625955 

     

    part #1 : Add this CSS to the image slider widget

     

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) 

    and (orientation : portrait){

    .slidesjs-container {

        height: 150px !important;

    }

    }

     

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 568px) 

    and (orientation : portrait) {

    .slidesjs-container{

    height: 125.778px !important;

    }

    }

    -------

    part #2 : Add this CSS to the form itself

     

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) 

    and (orientation : portrait) {

    iframe#customFieldFrame_15{

        height: 183px !important;}

    }    

     

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 568px) 

    and (orientation : portrait) {

    iframe#customFieldFrame_15{

    height:158px !important;

    }

    }

    --

    You can test my form https://www.jotformpro.com/form/62318580658968

    It was working like this.

     

     

    Let us know if you need further assistance.