Even though I've widened the spacing between questions, all of my widgets are standing on top of each other in the live form

  • Profile Image
    sloughbottom
    Asked on March 14, 2018 at 05:37 PM

    On the form builder it looks fine. On my website it's all squished together. Please help! thank you!

    https://form.jotform.com/62994072842262

    www.sloughbottom.ca/order-form.html

  • Profile Image
    John_Benson
    Answered on March 14, 2018 at 08:36 PM

    Are you referring to these widgets on your form?

    1521073036Over_001.png

    Upon checking the other widgets, I noticed that they are displaying properly. Here's a screenshot:

    1521073116Over_002.png

    Please add this custom CSS code to your form:

    #id_12 {

    padding-bottom: 25px !important;

    margin-top: 0px !important;

    }

    #id_14, #id_15 {

    padding-top: 25px !important;

    margin-top: 0px !important;

    }

    #id_13 {

    padding-top: 0px !important;

    margin-top: 0px !important;

    }

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

    Please try it and if you have questions, please let us know.

  • Profile Image
    sloughbottom
    Answered on March 15, 2018 at 12:18 PM

    Hi John! Thanks for your answer. Yes you identified the problem correctly (sorry for not explaining it properly!)

     

    It is improved now but it's still not quite right.I've fiddled around with the numbers a bit (increasing the pixels of the padding in your code) and increasing the spacing is working, but the bottom of the boxes are still not showing correctly. 

    Is this a different code to insert, to show the bottom of the boxes? I've tried changing the height in the properties of each widget but it's not working.

     

    I'd also like to decrease the padding between some of the other widgets but in the CSS code they are all written together in the same area and I'm not confident enough to figure out how to make it work properly.

  • Profile Image
    John_Benson
    Answered on March 15, 2018 at 01:14 PM

    Please check this cloned form: https://form.jotform.com/80735468424967

    Is that what you're trying to achieve? If yes, here's the custom CSS code that I have added to the form:

    iframe#customFieldFrame_12 {

    height: 100% !important;

    }

    iframe#customFieldFrame_13 {

    height: 100% !important;

    }

    iframe#customFieldFrame_14 {

    height: 100% !important;

    }

    .form-line {

    margin: 25px !important;

    padding: 0px !important;

    }

    To add the custom CSS code to your form, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this helps. Please contact us again if you need further assistance.

    Thank you.