Images in Image Picker widget are not properly aligned with long labels

  • Profile Image
    Sabahat_Haneef
    Asked on February 26, 2017 at 12:36 AM

    Hi,

    I'm using image picker with 16 images and labels respectively. My labels are long so The images are not aligned. I tried taking help from previous queries but no use. Please help me fix my image picker widget so 4 images are shown on the screen and well aligned with long labels.

     

    Also please make it responsive so it's seen well on mobiles.

     

    Many thanks

     

  • Profile Image
    Welvin
    Answered on February 26, 2017 at 06:59 AM

    I've fixed the alignment by injecting the following custom CSS codes in the widget configuration:

    .imageContainer {

          float: none;

    }

     

    The widget is already responsive. Do you want to adjust the image sizes to make two or three columns? If so, try adding the following custom CSS codes in the widget:

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

    .imageContainer {

        width: 50% !important;

        margin: 10px 0px !important;

    }

    }

     

    Let us know if you need further assistance.

  • Profile Image
    Sabahat_Haneef
    Answered on February 26, 2017 at 11:03 AM

    Hi, thanks for solving the issue, but there is one more glitch. Please find attached image to see what I mean. (image link incase it's not attached here: https://www.dropbox.com/s/mhh74an3ihr9otq/Capture.PNG?dl=0 )

    images and labels are unequal, please help me fix them.

     

    Thanks

  • Profile Image
    Welvin
    Answered on February 26, 2017 at 11:45 AM

    Add the following custom CSS codes in the form:

    .imageContainer {

        display: inline-table !important;

    }

    Here's our guide on how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The output should be the layout that you desired.