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

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

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:

Desktop view:

Bottom:


Please contact us if you have any questions.

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

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

I am also using this form now...

https://form.jotform.com/90625379408161

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:


Please contact us if you have any questions.

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

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

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.

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.

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.

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

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.

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.

Removing image and replacing it with image field.

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. 

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;

}

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;

}

}

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

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. 

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.

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.

thank you.  perfect.