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 and subtitle have zero margins on iPhone

    Asked by uibreakfast on February 05, 2014 at 04:35 PM

    Dear JotForm team,

    The responsive CSS injection works great, but I have one issue with the iPhone (desktop looks great). Form title and subtitle seem to have different (zero) margins, while I'd like them to be in line with the rest of the form.

    Could you please help with that?

    Page URL:
    http://form.jotformeu.com/form/40233795449360

    Screenshot
    form title and JotForm different div
  • Profile Image

    Answered by pinoytech on February 05, 2014 at 04:58 PM

    Hi,

    Is this what you want to achieve in your form?

    Replace your current custom css with this code in order to fix the issue.

    /*-----------RESPONSIVE LAYOUT-----------*/

    @media (max-width: 480px) {

    .form-textarea,.form-textbox,.form-dropdown {

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto;

    }

    .form-buttons-wrapper {

    margin-left:0 !important;

    }

    .form-input {

    width: 100%;

    }

    .form-all {

    width: 75%;

    }

    .form-sub-label-container {

    width: 75%;

    }

    #id_4, #id_10, #id_13, #id_34, #id_38, #id_39, #id_40, #id_33.form-line {

    margin-left: -35px !important;

    }

    }

    If you need further assistance, please let us know.

  • Profile Image

    Answered by uibreakfast on February 06, 2014 at 04:35 PM

    Thank you for rapid response!

    Actually, quite the opposite — now entire page has zero margins (which is never good in terms of design). Instead, I need the top paragraph to have the same margins as the form had in my initial screenshot.

  • Profile Image
    JotForm Support

    Answered by Mike_T on February 06, 2014 at 05:55 PM

    In this case we can add the left margin to your form header, try to use the following code:

    /*-----------RESPONSIVE LAYOUT-----------*/
    @media (max-width: 480px) {
    .form-textarea,.form-textbox,.form-dropdown {
    width: 100% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-label-left, .form-label-right {
    width: auto;
    }
    .form-buttons-wrapper {
    margin-left:0 !important;
    }
    .form-input {
    width: 100%;
    }
    .form-all {
    width: 75%;
    }
    .form-sub-label-container {
    width: 75%;
    }
    .form-header, .form-subHeader {
    margin-left: 35px;
    width: 80%;
    }

    }

    You can also play with a width: 80% value.

    Thank you.

  • Profile Image

    Answered by uibreakfast on February 10, 2014 at 05:10 AM
    Thank you Mike! The form now looks perfect on iPhone, but:
    (a) the problem persists in landscape mode;
    (b) the desktop version, when narrowed down under 480px, now has that
    unwanted 35px margin on the left that shifts the header from the normal
    position to the right.
    Is there any logical explanation to why the header behaves different from
    the form body? Adding an artificial 35px margin only seems to solve one
    particular case.
    I apologize for being so picky with the details, just want the form to
    behave logically and look nice in all situations. Thanks for the great
    product!
    ---
    UI Breakfast: User Interface Design and Consulting
    www.uibreakfast.com
    ...
  • Profile Image
    JotForm Support

    Answered by TitusN on February 10, 2014 at 08:45 AM

    Hello,

    Thank you for the feedback.

    You are right, while the syle for mobile works, it affects other views because the CSS rules apply universally.

    You may want to consider using viewports to apply different styles for each situation.

    We can advice on this, please share your website URL where the form is located (I tried... ) so that we may consider all factors.

    Thanks