How can I control the position of a jotform when a website is viewed on a mobile phone?

  • Profile Image
    Kathryn
    Asked on November 10, 2011 at 01:35 PM

    The website is designed so that there is a jotform on the right hand side of the page. When viewed on a pc or laptop this works perfectly.

     

    When viewing the website using a mobile phone, the jotform overlaps the other content of the site, making the text and the form illegible.

     

    The website was designed using Xara Designer Pro.

    I need to resolve this problem urgently, all advice appreciated.

     

     

  • Profile Image
    Mike_T
    Answered on November 10, 2011 at 06:02 PM

    Thank you for contacting us.

    It is possible that optimized mobile version of form is causing the problem. In order to disable mobile version you can download source code of your form. Then, find form.css file in sources, and remove the following code and everything below this line:

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

    After this, you will have to embed your form using full source code.

    Please give it a try, and let us know if you need any other assistance. 

  • Profile Image
    aytekin
    Answered on January 22, 2013 at 03:28 AM

    Update: We are now allowing @media inside Inject Custom CSS.

  • Profile Image
    peternasser
    Answered on October 20, 2015 at 03:26 AM

    Thanks, but now, the form is covering the picture in the background, How can I make it that it shows that picture in the background?

     

    Thanks again

  • Profile Image
    aytekin
    Answered on October 20, 2015 at 03:44 AM

    What is the URL of the form? 

  • Profile Image
    peternasser
    Answered on October 20, 2015 at 03:50 AM

    https://form.jotform.com/52872331473961

  • Profile Image
    Sammy
    Answered on October 20, 2015 at 05:25 AM

    I did check your form and the image is included as a background image which means the form will always appear on top of it.

    If you wanted the message of the image to be visible regardless of screens size I would recommend using the image contain and adding it as part of the form.

     

    Please let us know if this addresses your issue.

  • Profile Image
    peternasser
    Answered on October 20, 2015 at 05:39 AM

    Thanks, I dont mind to do it like this, but is there away then to have the form fields on the picture?

     

     

  • Profile Image
    Chriistian
    Answered on October 20, 2015 at 07:12 AM

    Hi,

     

    Yes, it is possible. You can try to add/inject this custom CSS code in your form.

    li#id_6 {

        position: absolute;

    }

     

    You can check this cloned form that I used for testing - https://form.jotformpro.com/52923473907967.

     

    Do let us know if you need further assistance.
    Regards.