Image Picker: make them show side by side in mobile view.

  • justinnubla
    Asked on March 20, 2019 at 9:30 PM

    Hi, is there a way to make the view on image picker for desktop and mobile to be the same? desktop-side by side, mobile- on top of one another. i want to make both side by side for comparing. please check the attached photos. Thanks!


    1553131684Capture Screenshot 101553131717viber image 2019 03 21 , 09 Screenshot 21

  • David JotForm Support Manager
    Replied on March 21, 2019 at 12:10 AM

    You may try to reduce the width of the image containers, please inject this code as shown on this guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    @media only screen and (max-width: 480px) and (orientation : portrait){

    .imageContainer.blocks {

        width: 161px !important;

    }

    }

    Result:

    1553141356sidebyside Screenshot 10

    Let us know if you need more help.

  • justinnubla
    Replied on March 21, 2019 at 1:10 AM

    Hi, tried using the css code but it still like the image attached. Maybe it just needs adjusting? If it does work, can the height also be a bit shorter since the image look stretched. Thanks! 1553144987viber image 2019 03 21 , 13 Screenshot 10


  • Mike_G JotForm Support
    Replied on March 21, 2019 at 3:04 AM

    I'll check the codes and your form further and I'll be working on a concern. Please give me some time. I'll get back to you with a solution.

  • justinnubla
    Replied on March 22, 2019 at 2:15 AM

    okay. thanks!

  • Mike_G JotForm Support
    Replied on March 22, 2019 at 4:28 PM

    I would like to apologize for any delays.

    Below are the CSS codes that you need to inject to the custom CSS tab of each Image Picker widget in your form.

    div#container {

        width: 93.96% !important;

        margin: auto !important;

    }

    .imageContainer.blocks {

        width: 48% !important;

        vertical-align: top !important;

    }

    .imageContainer.blocks:nth-child(2) {

        margin-right: 0px !important;

    }

    .divimg img {

        padding: 3px 3px 0px 3px !important;

        margin: 0px !important;

    }

    .divimg {

        height: 100% !important;

    }

    1553286430t16 24 52 Screenshot 10

    If you have other questions or concerns, please do not hesitate to let us know.

  • justinnubla
    Replied on March 22, 2019 at 10:53 PM

    This worked perfectly. Thanks!!