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

    Mobile version is suddenly skewed

    Asked by standoutcv on April 29, 2016 at 04:29 AM

    Hi 

    I'm having an issue with one of my forms "Clone of Google ads landing page" found here https://form.jotformeu.com/51184291769363

     

    The mobile version used to laid out pretty much identically to the desktop version, which worked great for me

    But now (I'm assuming after some sort of update) the mobile version is skewed with text appearing in the wrong areas and the button veering off to the left.

    I have attached a screenshot

    I would prefer the mobile version to go back to appearing the same is desktop

    Any help you can provide would be much appreciated

     

    Regards

     

    Andrew 

     

    Page URL:
    https://form.jotformeu.com/51184291769363

    Screenshot
    Mobile mobile version css iphone mobile responsive
  • Profile Image
    JotForm Support

    Answered by Mike_G on April 29, 2016 at 07:31 AM

    This is how your form would look like on an iPhone 6s+, iOS 9

    after you have added the CSS codes below to you form.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown,.form-submit-button{

        display: inline !important;

        width: 90% !important;

    }

    .form-sub-label-container {

        display: inline !important;

    }

    textarea{

        background-color : white !important;

        border : 0.125em solid transparent;

        height : 2.6em;

        -webkit-transition : all 0.5s ease;

        -moz-transition : all 0.5s ease;

        -o-transition : all 0.5s ease;

        transition : all 0.5s ease;

        font-family : Arial, Helvetica, sans-serif;

        margin-bottom : 1.5em;

        line-height : 1.3 !important;

    }

    textarea:focus {

        border-color : #f4d31e;

        box-shadow : inset 0 0 1em rgba(244,211,30,0.5);

        height : 7em;

        -webkit-transition : all 0.5s ease;

        -moz-transition : all 0.5s ease;

        -o-transition : all 0.5s ease;

        transition : all 0.5s ease;

    }

    .form-submit-button {

        margin: 1em 0 1em 0em !important;

    }

    .form-sub-label{

        margin-left: 2em !important;

    }

    }

    Here's how you can add custom CSS codes to your form: How-to-Inject-Custom-CSS-Codes

    Please note that the codes were added and tested on a stand-alone(not embedded on a website) clone version of your form.

    Can you, by the way, give us the link to your website where your form is embedded?

    Here's the clone version of your form: https://form.jotform.com/61192444027956

    I hope this helps. If not, please feel free to get back to us so we can further assist you. Thank you.

  • Profile Image

    Answered by standoutcv on April 29, 2016 at 09:27 AM

    Hi 

    Thanks very much

    This has done the trick... Almost :)

    There is one small problem occurring though

    Now on mobile and desktop when I add the form to this page http://pack.standout-cv.com/pro-cv-writing-service 

     

    The button appears slightly to the left of the form fields

     

    If you could show me how to align the button with the fields, I would be hugely grateful!

     

    Thanks

    Andrew

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 29, 2016 at 10:36 AM

    I have checked the website you have included in your last reply, however, it says,

    So I am not able to check how your form looks like on my end.

    Anyway, I believe I know what went wrong. Since I don't know where your form is embedded earlier, I've just put in a "margin: 1em 0 1em 0em !important;" on this part of the code I have given above:

    .form-submit-button {

        margin: 1em 0 1em 0em !important;

    }

    Because, that seems to be perfect on my end.

    Now, you can try to change that to anything that would actually match your preference.

    For example: 

    .form-submit-button {

        margin: 1em 0 1em 1em !important;

     

    }

    I hope this helps. Otherwise, please feel free to get back to us so we can further assist you. Thank you.

  • Profile Image

    Answered by standoutcv on April 29, 2016 at 10:44 AM

    Hi

    Sorry I made an error on the page

     

    This is the page: http://pack.standout-cv.com/pro-cv-writing-service

     

    Also I'm not entirely sure what you mean in terms of inserting that code (I don't know much about coding I'm afraid)

     

    Is there any chance you could show exactly what I need to paste in? and where?

     

    Essentially I need the button to be centred with the fields so that the edges of the button, line up with the edges of the fields

     

    Many thanks!

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 29, 2016 at 01:23 PM

    Thank you for giving me the correct website as I was able to test it further.

    Below are the exact new codes that you need to add to your form. Just follow the instructions on this guide, How-to-Inject-Custom-CSS-Codes, to learn how to.

    .form-all{

    width: 20.1em !important;

    }

    input[type="file"] {

        width: 19.1em;

    }

    .form-error-arrow{

    left:20px !important;

    }

    .form-error-message{

    position:relative !important;

    right:-20px !important;

    max-width:86% !important;

    border-radius: 10px 10px !important;

    height: 15px;

    }

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-all{

    width: 20.75em !important;

    }

    .form-submit-button {

        margin: 1em 0 1em 21.3906px !important;

    }

    }

    @media only screen 

    and (min-device-width : 414px) 

    and (max-device-width : 736px) {

    .form-submit-button {

        margin: 1em 0 1em 0.8em !important;

    }

    }

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px) {

    .form-submit-button {

        margin: 1em 0 1em 0.8em !important;

    }

    }

    Above are additional codes and please do not remove the set of codes I have asked you to add on my first reply on this thread.

    I hope this really fixes the issue you have. 

    Let us know if you still need any further assistance. Thank you.

  • Profile Image

    Answered by standoutcv on April 29, 2016 at 01:36 PM

    Thanks Mike that's perfect

     

    You're a legend 

  • Profile Image
    JotForm Support

    Answered by Mike_G on April 29, 2016 at 02:53 PM

    You are most welcome! 

    Please feel free to contact us anytime you have questions or concern and we will be glad to help you. 

    Cheers! :)