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

    Lightbox Form Great on Desktop, Too Tiny on Mobile

    Asked by kungo on August 10, 2013 at 09:42 AM

    You guys are typically great at getting back, but I posted this question (under different title) 10 hours ago, and it was never responded to. If there is a limit to how many questions can be asked, fine -- but then let me know.

    This JotForm shows fine on Desktops, but apprently tiny on mobiles (my client says it doesn't work at all).
    Is there a way to make it look larger on mobile, without enlarging it further for desktop?

    I have uploaded BrowserStack to show what I mean:

    http://www.browserstack.com/screenshots/c3ccdc0b6dabbd3702f30244caa5bd941d4c33dd

    Thank you in advance for any advice.


     

    Page URL:
    http://aenys.com

    lightbox form Mobile JotForm different screenshots
  • Profile Image
    JotForm Support

    Answered by Welvin on August 10, 2013 at 01:11 PM

    Hi,

    Good day! Here are your recent threads: 

    http://www.jotform.com/answers/254781

    http://www.jotform.com/answers/254753

    We would suggest to only create a single thread for the same inquiry or issue within your form. If it is a different issue, then you are free to create a separate thread as we advised to the others.

    You have several threads per checking your account which is related to Mobile Viewing of the Lightbox Form. Some of my colleague have provided you a solution which you confirm to have fixed the problem.

    Anyway, I've check the screenshot and the problem is at the bottom part is cut-off? Is that right? To solved that, please kindly modify or change the value of the custom CSS codes added to the page:

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

    .jt-content{

    width:370px !important;

    overflow-x:hidden;

    }

    .jt-feedback {

    position: absolute !important;

    left: 50% !important;

    top: 585px !important;

    }

    }

    You can adjust the values from the Width, Left and Top attributes until you'll see the desired output. Please try that and let us know for the results.

    Thanks

  • Profile Image

    Answered by kungo on August 10, 2013 at 05:03 PM

    Hello Melivin - that is not the answer to the last question I posted, but thanks anyway.


    I asked the following in the question (you responded to): I want to know if I can make my form responsive, so that it will look larger, (than it does now), on a mobile screen. I provided the link, and screenshots of what I meant. Here is link again; http://aenys.com

    I posted two questions concerning the latest issue, because it wasn't being answerd after a lenghthy period.  It was finally answered once, but the answer did not solve the problem.

    You guys usually do a great job.

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 11, 2013 at 02:29 AM

    @kungo

    This is possible with custom codes. We'll try to find a solution and get back to you with this.

    Our apologies for the delayed response.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 11, 2013 at 03:50 AM

    @kungo,

    I look back from the previous threads from where this issue started because I doubted you made some changes on your website codes. After further searching, I've found out that the meta tag for mobile device has been removed on your page? Did you removed it intentionally? That's the reason why the form looks pretty small on mobile device. 

    Anyway to fix it, add the following meta code above the <style> tag on the previous codes we gave you.

    <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1.0, user-scalable=0" />

    You can change 0.8 scale if you'd like to zoom it further but 0.8 looks fine to me. Here's the result:

    Let us know if you need further assistance.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 11, 2013 at 03:53 AM

    By theway, I think you need to update the form length for mobile display. Here's the full CSS codes you need with the meta code above it.

    <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1.0, user-scalable=0" />

    <style>

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

    .jt-content{

    width:370px !important;

    overflow-x:hidden;

    max-height:630px !important;

    min-height:630px !important;

    }

    .jt-feedback{

    position: absolute !important;

    left: 50% !important;

    top: 355px !important;

    }

    }

    </style>

    Just replace your existing CSS codes with this. Thanks!

  • Profile Image

    Answered by kungo on August 11, 2013 at 05:44 PM

    Elton, you're a pro -- and I appreciate your detailed response. I think your fix is working, but the page is loading so slow, I can't tell yet.


    But thank you very much for your helpful response!