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

    Image Picker Widget: How to make it mobile responsive?

    Asked by halhawkins on July 13, 2016 at 03:39 PM

    Currently, the widget doesn't resize the images on mobile devices. It continues along on one row, so that I have to swipe left to sort through them.

    How do I make them move down to multiple rows, preferably just two columns wide?

     

    https://form.jotform.com/61937155563159

    Page URL:
    https://form.jotform.com/61937155563159

    Mobile image picker mobile responsive image picker widget
  • Profile Image
    JotForm Support

    Answered by Welvin on July 13, 2016 at 04:47 PM

    I've fixed it for you by doing the following:

    1. Inject the following custom CSS codes in the form:

    @media only screen and (max-device-width: 768px) {

    .custom-field-frame {

        width: 100% !important;

    }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    2. Inject teh following custom CSS codes in the first widget:

    @media only screen and (max-device-width: 768px) {

    .imageContainer.blocks {

        width: 45% !important;

    }

    .divimg {

        width: 150px !important;

        height: 150px !important;

    }

    }

     

    The CSS codes are for mobile only, won't affect the normal form view in PC. 

    Please let us know if you need any further assistance. 

  • Profile Image

    Answered by halhawkins on July 13, 2016 at 05:45 PM
    It works as far as moving them within the screen, however, on the second Image Picker, it is showing gaps between images, like only one image on a row. Any way to fix this?

    ...
  • Profile Image
    JotForm Support

    Answered by Mike on July 13, 2016 at 07:43 PM

    The gap is caused by image labels of different sizes.

    In order to fix this you may try one of the following options:

    1) Add a CSS to set a standard minimal height for image labels.

    .imageLabel {
    min-height: 40px;
    }

    2) Increase image size to 125x125. This will also increase the image labels.

    Thank you.