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

  • art_crate
    Asked on January 6, 2015 at 6: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?

  • Charlie
    Replied on January 6, 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".

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

     

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

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

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

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

    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.

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

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

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

     

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

    Thank you.