How to induce spacing in between the image choice elements?

  • lgeraci
    Asked on June 7, 2019 at 10:16 AM

    I am trying to get all of my images to be aligned. I know that it has to do with the text underneath my images, but is there a way to make them straight? 

    If not, is there a way to include a blank space in between product under the image choice widget?

  • roneet
    Replied on June 7, 2019 at 11:48 AM

    Just to confirm, are you referring to this Form?

    https://www.jotform.com/91574083717160

    Do you want to display image 3 in a row?

    How to induce spacing in between the image choice elements? Image 10

    Please confirm your requirements so that we can assist you better.

    Thanks.

  • lgeraci
    Replied on June 7, 2019 at 2:41 PM

    Yes, 3 or 4 in a row would work. Just trying to get them all aligned. If that's not possible, I was wondering if there is a way to do a page break in between product styles.

  • Welvin Support Team Lead
    Replied on June 7, 2019 at 3:36 PM

    It's possible with custom CSS Codes. I have added the following in the first widget:

    .options li {

        vertical-align: middle;

        margin: 0 auto;

        margin-bottom: 20px;

        text-align: center;

        width: 25%; 

    }

    .options span {

        position: relative;

        width: 200px;

        display: block;

    }

    You can check the CSS in teh widget itself, guide here: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    Adjust 25% in the CSS if that does not fit the columns that you'd like, especially for the other widgets that have images with different sizes. 

    I hope that helps. Please let us know if you need further assistance.