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

    Neither the Image Radio Widget nor the Image Check Box Widget are ideal for mobile: They are not responsive

    Asked by art_crate on January 06, 2015 at 06:07 AM

    - Image Radio Widget

    - Image Check Box Widget

     

    Both of these widgets are not ideal for mobile, I know this is probably another thread question. But is it possible to make these two widgets more friendly for mobile?

  • Profile Image
    JotForm Support

    Answered by Charlie on January 06, 2015 at 10:57 AM

    Hi,

    You can try injecting Custom CSS codes width media query declarations on them inside your form using the Form Designer. You can follow the example below. I've setup a form with an Image Radio Button widget, here's my sample form http://www.jotform.com/form/50048241729958

    We can use media query to apply when the size of the screen is at least 500px and above.

    @media (min-width: 500px){

        #customFieldFrame_5 {

            width : 600px !important;

            height: 100px !important;

        }

    }

     

    Media query to apply when the size of the screen has a max size of 400px for mobile devices.

    @media (max-width: 400px){

        #customFieldFrame_5 {

            width : 300px !important;

            height: 400px !important;

        }

    }

     

    The #customFieldFrame_5 is the id for the specific widget, you can find it by following the screenshot below.

    1. We want to find the ID of the widget. View your form and right click on the widget, choose "Inspect Element".

     

    2. Find the iframe that is associated with the widget, right click and choose "Copy CSS path".

    3. Open your Form Designer, navigate to the CSS tab and paste the copied CSS path inside the media queries.

    4. In my virtual environment, when the form is viewed on a mobile device with a width of 400px and less, the size of the widget will display in this view.

    5. When the display is 500px and larger it will line up in horizontal.

     

    I hope this helps or at least gives you an idea on how to proceed.

    Thank you.