Logo is now getting cut off and I have no space at the bottom of the form

  • Profile Image
    Appelbaum
    Asked on March 04, 2019 at 03:44 PM

    for some reason, the logo is now getting cut off and I have no space at the bottom of the form. I have the form embedded on our website but also is showing as cutoff on jotform.com when I go to the live link. HELP!

    https://www.theaccelerationproject.org/2019-spring-benefit.html

     

  • Profile Image
    Alan_D
    Answered on March 04, 2019 at 04:21 PM

    Please update your CSS code like this:

    .form-all:before {
        top: -610px;
        left: 0;
        background-position: top left;
        text-shadow: 0 0 black;
    }
    #label_14{
      width:90%!important;
    }
    #text_10 > p {
      margin-bottom: -15px !important;
    }
    @media screen and (max-device-width: 40em) {
    .form-all:before {
        background-position: bottom center !important;
        top:-610px;
    }
      .form-all{
        top:-200px
      }
    }
    .form-all {
        margin-top: 560px !important;
        }
    }
    .form-all {
        margin-top: -5em !important;
    }
    .form-line.form-line-active {
        background-color: #999 !important;
    }

    Mobile view:
    15517342951.png
    Desktop view:
    15517343192.png
    Bottom:
    15517344283.png

    Please contact us if you have any questions.

  • Profile Image
    Appelbaum
    Answered on March 04, 2019 at 04:49 PM

    is there a reason why it looks like this in the editor now?

    1551736119Screen Shot 2019-03-04 at 4.46

    And like this on the landing page where I embedded the code. - image is off center to form below it.

    1551736176Screen Shot 2019-03-04 at 4.49


    I am also using this form now...

    https://form.jotform.com/90625379408161

  • Profile Image
    Alan_D
    Answered on March 04, 2019 at 05:25 PM

    Probably, you deleted your form. I couldn't reach this: https://form.jotform.com/90625379408161
    On CSS page, we are injecting custom CSS codes into form. Sometimes the builder is being unstable because of these codes. That is why you are seeing a different layout of form on the builder.

    This is my cloned form:
    https://www.jotform.com/build/90626351721958
    Please fix this line to the center image:
    15517382502.png
    15517382701.png
    Please contact us if you have any questions.

  • Profile Image
    Appelbaum
    Answered on March 04, 2019 at 05:45 PM

    thank you but now showing a lot of blue space at the bottom.  see screenshot on desktop.  same thing on mobile (iPhone 10xs).  and this is the form I'm using (sorry about deleted one) - https://form.jotform.com/90627182098160


    1551739475Screen Shot 2019-03-04 at 5.43

  • Profile Image
    jonathan
    Answered on March 04, 2019 at 07:01 PM

    I was able to see the form bottom big space issue also.

    1551743532zzz 2019-03-05 07.42.16.png


    I reviewed your form and I think the real issue with the form height had to do with the logo image having excessive length. 

    The logo was already taking almost 50% of the form height when embedded on the website.

    1551743638zzz 2019-03-05 07.49.48.png


    Here are my suggestions to fix.

    1. Remove the Logo image of the form

    2. To add the header image form logo, use the Image field instead. 

    You can use the URL link of the image logo you used originally and add it to the Image field instead.

    1551743779zzz 2019-03-05 07.50.27.png


    3. Remove the custom CSS codes and replace it with this only 

    @media screen and (max-device-width: 40em) {

    .form-all:before {

        background-position: bottom center !important;

        top:-610px;

    }

    }

    .form-line.form-line-active {

        background-color: #999 !important;

    }

    ---

    Let us know how it goes.



  • Profile Image
    jonathan
    Answered on March 04, 2019 at 07:02 PM

    After you have fixed the form, you need to re-embed it again on the website using a fresh iframe embed code.


  • Profile Image
    Appelbaum
    Answered on March 04, 2019 at 07:55 PM

    better except now zero space at the bottom of the form on mobile.  see screenshot

    I replaced the css code in this form. Had to clone support's form b/c of other issues.....https://form.jotform.com/90627081642153

    but can u check the code in my original? https://form.jotform.com/90566039986169 I want to make sure that nothing is missing b/c I've made so many changes and support has helped me add other code (can't remember for what) so I just want to make sure it's all working the same way.

    Also - I'd prefer that the two dividers don't show at the bottom of the form.  How can I get rid of them?  I only want 1 to show after they make their selection - so 1 b/w digital journal field and # of tickets.

    1551747246Image-1.jpeg

  • Profile Image
    Jed_C
    Answered on March 04, 2019 at 10:00 PM

    I cloned your form https://form.jotform.com/90566039986169 and it doesn't show that you have applied the changes suggested by my colleague.

    Also, the CSS is not correct, you have to remove the existing CSS code and replace it with what was given.

    1551754603remove_css.gif

    Removing image and replacing it with image field.

    1551754728remove_image.gif

    Lastly, please remove the embed code on your site and follow this guide https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code to get a new iframe code.

    About the mobile spacing, would you mind clarifying it. Do you want to have a spacing between the footer and the form?

    Looking forward for your response. 

  • Profile Image
    Appelbaum
    Answered on March 04, 2019 at 10:16 PM

    hmmm.  

    - I did embed "image" and remove "logo" and I did insert the css code given below...Are you looking at my latest cloned form?

    https://form.jotform.com/90627081642153

    - re: mobile spacing - I want a small blue space around the grey form the same way there is on desktop.  And I'd like to remove the 2 divider lines that show before someone has made a selection.

    - do I need to embed the iframe code EVERY time I make an update?   I thought it updated automatically?

    @media screen and (max-device-width: 40em) {


    .form-all:before {


        background-position: bottom center !important;


        top:-610px;


    }


    }


    .form-line.form-line-active {


        background-color: #999 !important;


    }

  • Profile Image
    BJoanna
    Answered on March 05, 2019 at 01:55 AM

    Please add the following CSS code to resolve the issue with bottom spacing:

    @media screen and (max-device-width: 40em) {

    .jotform-form {

        padding-bottom: 10px!important;

    }

    }

    1551768154Screenshot_20190305-074021_Sam

    You can add the following condition to your form to hide dividers:

    1551768719hide1.PNG

    Or you can update your existing conditions and include divider fields.

    Here is a demo form - https://www.jotform.com/form/90630685131958 

    You do not have to re-embed your form each time you update it. It will be updated automatically when it is embedded with the iFrame code. 

  • Profile Image
    Appelbaum
    Answered on March 05, 2019 at 07:09 AM

    the css code worked.  thank you.

    I had to play around w hiding the divider lines - ultimately, I got it to only one showing even though the way I have the condition, I would have thought there would be none showing??  I had previously (before this thread) tried adding the lines to my existing conditions but that wasn't working either...

    re: iframe - I thought so.  I got confused when they kept asking me to re-embed b/c I had originally used iframe.

  • Profile Image
    BJoanna
    Answered on March 05, 2019 at 10:04 AM

    To hide the second divider, update condition #3 and change If ANY to If ALL rules are matched. Also, include the last divider to the list of fields that should be hidden.

    1551798191condition3.gif

  • Profile Image
    Appelbaum
    Answered on March 05, 2019 at 04:36 PM

    thank you.  perfect.