What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by lancemartin 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;

    }

     

    Page URL:
    https://www.jotformpro.com/form/62308223625955?preview=true

    Screenshot
    responsive image slider
  • Profile Image
    JotForm Support

    Answered by jonathan 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.