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

  • Profile Image
    Asked 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
    Answered on January 06, 2015 at 10:57 AM


    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

    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.