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

    How can I align my form to the left when it is opened on desktop?

    Asked by ipbr21054 on March 31, 2016 at 05:59 AM

    Here is the form http://form.jotformeu.com/form/60903019595357

    Currently the form is centered to the page with its new background.

    When viewing on the pc you can see that the form obscures the main part of the image.

    I would like to be able to position the form left of center etc.

    Thus when you then view it on a pc the main part of the image can be seen.

     

    However i MUST have the form centered like it currently is for mobile & tablets viewing.

    When viewing this form on iphone or ipad pretty much 99% of the background image is not seen anyway hence why i need it still centered for mobiles & tablets etc.

    Please could you clone my form or edit my form BUT show me where you added new code or edited original code so i can then adjust it etc to my liking.

     

    Many Thanks

     

    Have a nice day.

    Web page form on background image ipad Mobile pc
  • Profile Image
    JotForm Support

    Answered by mert on March 31, 2016 at 10:29 AM

    Hi there,

    By injecting custom CSS to your form, you can easily achieve this objective. Below, you will find the necessary code. Please, inject it with the method provided.

     

    @media screen and (max-width: 1365px){

    .form-all {

    float: none;

    }

    }

     

    @media screen and (min-width: 1366px) and (max-width: 2400px){

    .form-all {

    float: left;

    }

    }

     

    Please, try this one and let us know the results.

    Regards.

  • Profile Image

    Answered by ipbr21054 on March 31, 2016 at 11:19 AM

    Hi,

    Thanks for that.

    I applied the same code to one of my other forms but the form does not position itself on the left but stays centered ?

    Here is the form 60712393428355 if you could take a look for me.

     

  • Profile Image
    JotForm Support

    Answered by mert on March 31, 2016 at 11:29 AM

    Hi again,

    I assume the media query skips the rule because of the resolution; but we don't need to define it, we can simply use the following. On mobil devices, it will align centered because of the lack of space. So, delete the previous one and apply the one from the below:

     

    .form-all {

        float: left !important;

    }

     

    Also, you can see the results from the below:

     

    Please, do let us know the results.

    Thanks.

  • Profile Image

    Answered by ipbr21054 on March 31, 2016 at 11:33 AM

    So delete all this

    @media screen and (max-width: 1365px){

    .form-all {

    float: none;

    }

    }

     

    @media screen and (min-width: 1366px) and (max-width: 2400px){

    .form-all {

    float: left;

    }

    }

     

    And just use this

     

    .form-all {

        float: left !important;

    }

     

    IS THAT CORRECT ?

  • Profile Image
    JotForm Support

    Answered by mert on March 31, 2016 at 11:38 AM

    Yes, it is correct. Those ones were for the detect resolution differences between mobile and desktop; but as I explained on my previous post, I realized that we don't need to use them. So, just paste the last one.

  • Profile Image

    Answered by ipbr21054 on March 31, 2016 at 11:45 AM

    cheers

  • Profile Image
    JotForm Support

    Answered by mert on March 31, 2016 at 11:46 AM

    Glad to hear that, you are most welcome. For your further questions, please do let us know.


    Regards.