What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form Title cut off on iOS

    Asked by dcleary24 on May 02, 2013 at 07:43 AM

    I have loaded forms on several pages of my website, and the forms look fine in all desktop browsers.  The issue I am having is the Form Title being cut off from the left side in iOS (Safari and Chrome).

    I am using embed code for my WordPress site.

    A couple of pages with forms are:

    http://videobenefitsguy.com/contactconnect/ (notice where the word Contact is cut off in the title)

    http://videobenefitsguy.com/view-5-minute-guided-tour/ (notice where the title is cut off - should display "View a Guided Tour") 

    Again, Form Titles displays fine on desktop browsers, but cut off in iOS.


    Any suggestions? Thanks!

    form title ios site thanks
  • Profile Image
    JotForm Support

    Answered by Welvin on May 02, 2013 at 09:50 AM

    Hi,

    Good day! That is maybe because the form has been modified by some custom CSS codes. Please try to inject this custom media CSS query codes to - both of the form;

     

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

    .form-header-group {

    margin-left: 37px !important;

    }

    }

     

    This is the guide on how you can inject this codes: How to Inject Custom CSS Codes

    Let us know if it still the same.

    Thanks

  • Profile Image

    Answered by dcleary24 on May 02, 2013 at 09:56 AM
    I did use custom CSS to left align the form. Should I replace that CSS on
    the form with what you have provided? Will it still left align?
    Thanks!
    David
    On May 2, 2013, at 9:50 AM, JotForm Support Forum
    wrote:
    New response received
    A new response has been received:
    [image: JotForm]
    Answered by * Welvin *
    Hi,
    Good day! That is maybe because the form has been modified by some custom
    CSS codes. Please try to inject this custom media CSS query codes to - both
    of the form;
    *@media only screen and (max-device-width: 550px){*
    *.form-header-group {*
    *margin-left: 37px !important;*
    *}*
    *}*
    This is the guide on how you can inject this codes: How to Inject Custom
    CSS Codes
    Let us know if it still the same.
    Thanks
    View this thread on JotForm Support
    Forum
    Unsubscribe
  • Profile Image

    Answered by sidharth_kch on May 02, 2013 at 10:04 AM

    @dcleary24

    You dont have to replace the existing CSS in your form, please add this css provided by my colleague. 

    Please let us know if this resolves your issue.

    Thansk,

    Sidharth

  • Profile Image

    Answered by dcleary24 on May 02, 2013 at 11:56 AM

    This is the code now:

     

    .form-all {margin-left: -35px !important;}@media only screen and (max-device-width: 550px){.form-header-group {margin-left: 37px !important;}

     

    The form title is still being cut off on the left.

  • Profile Image
    JotForm Support

    Answered by Welvin on May 02, 2013 at 12:45 PM

    Hi,

    The codes should be this one:

    .form-all {

    margin-left: -35px !important;

    }

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

    .form-header-group {

    margin-left: 37px !important;

    }

    }

    Your forgot to include one closing } symbol. Remove the current codes injected to your form(s) and replace this one.

     

    Thanks

  • Profile Image

    Answered by dcleary24 on May 02, 2013 at 12:49 PM

    Thank you. I have replaced the code with your suggestion:
    .form-all {margin-left: -35px !important;}@media only screen and (max-device-width: 550px) {.form-header-group {margin-left: 37px !important;}}

    No change when viewing form on iOS. Title still cut off.  If you have an iPad or iPhone, you will see it at http://videobenefitsguy.com/contactconnect/  

  • Profile Image
    JotForm Support

    Answered by Welvin on May 02, 2013 at 12:53 PM

    Hi,

    Please change these codes:

    @media only screen and (max-device-width: 550px) {.form-header-group {margin-left: 37px !important;}}

    To:

    @media only screen and (max-device-width: 550px) {.form-all {margin-left: 0px !important;}}

    I hope this resolves the issue now.

    Thanks

  • Profile Image

    Answered by dcleary24 on May 02, 2013 at 12:57 PM

    Resolved the issue on iOS, but now the form is center-justified on desktop browser, instead of left-justified.

  • Profile Image
    JotForm Support

    Answered by Welvin on May 02, 2013 at 01:03 PM

    Hi,

    I've fixed that, you have removed the entire codes. You shouldn't not remove the;

    .form-all {margin-left: -35px !important;}

    Sorry for not so being clear.

    The overall codes should be:

     

    .form-all {

    margin-left: -35px !important;

    }

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

    .form-all {

    margin-left: 0px !important;

    }

    }

    ===========

    For Desktop Codes:

     

    .form-all {

    margin-left: -35px !important;

    }

    =========

     

    For Mobile Codes:

     

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

    .form-all {

    margin-left: 0px !important;

    }

    }

    =========

     

    Cheers! :)

     

     

  • Profile Image

    Answered by dcleary24 on May 02, 2013 at 01:43 PM

    Resolved...thank you!!!

  • Profile Image

    Answered by sidharth_kch on May 02, 2013 at 01:45 PM

    @dcleary24

    Glad to know that your issue was resolved.

    Should you have any questions please feel free to contact us.

    Thanks,

    Sidharth