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

  • Profile Image
    justinnubla
    Asked on March 20, 2019 at 09: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.PNG1553131717viber image 2019-03-21 , 09.25

  • Profile Image
    BDAVID
    Answered 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.png

    Let us know if you need more help.

  • Profile Image
    justinnubla
    Answered on March 21, 2019 at 01: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.09


  • Profile Image
    Mike_G
    Answered on March 21, 2019 at 03: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.

  • Profile Image
    justinnubla
    Answered on March 22, 2019 at 02:15 AM

    okay. thanks!

  • Profile Image
    Mike_G
    Answered on March 22, 2019 at 04: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.png

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

  • Profile Image
    justinnubla
    Answered on March 22, 2019 at 10:53 PM

    This worked perfectly. Thanks!!