Mobile Form button and font size isn't quite appearing correctly

  • ekdesigns
    Asked on October 15, 2016 at 4:17 PM

    Hi there,

    I've made my mobile site's page with a smaller form taken from my main website one, and for some reason the submit button (which I've experimented with) doesn't look right.. at least on the form builder view it looks fine but when published online, the vertical position inside the button itself isn't central.

    I must be missing something or should remove something but I haven't a clue what as I'm not an expert at coding.

    Any ideas?

    Thanks! Esther.

    Jotform Thread 962137 Screenshot
  • eceblngn
    Replied on October 15, 2016 at 4:47 PM

    Hi Esther,

    Have you tried making your form mobile responsive? 

    If not, here is the guide : https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm

    I hope this solves your problem. 

  • ekdesigns
    Replied on October 15, 2016 at 6:25 PM

    Thanks, I managed to solve the problem with that link!

  • Jan
    Replied on October 15, 2016 at 11:50 PM

    Glad to hear that the issue is now resolved. Let us know if you need further assistance. Thank you.

  • ekdesigns
    Replied on October 16, 2016 at 5:09 AM

    Just one thing, my iphone screen is correct now but when I check my kindle fire, it still has the same problem.. I increased the media screen width to 900px which should enable the kindle fire to work properly .. but not so much.  Am I missing something here?

    Thanks!

  • Mike_G JotForm Support
    Replied on October 16, 2016 at 9:19 AM

    I would like to apologize for I don't have a Kindle Fire device, but can you provide us more information, please?

    May we know what Kindle Fire device you have? And can you post a screenshot in this thread of your form loaded on your Kindle Fire device, please?

    We will wait for your response. Thank you.

  • ekdesigns
    Replied on October 16, 2016 at 9:33 AM

    Ahh yes, sorry about that!  I've attached a picture of what I'm seeing on my kindle fire HD (3rd generation) device:

    Mobile Form button and font size isnt quite appearing correctly Image 1 Screenshot 20

     

  • Charlie
    Replied on October 16, 2016 at 10:25 AM

    May I know what the issue is? It seems to be working properly on your Kindle device. Are you referring to the vertical alignment of the text in the submit button?

    I checked your website link and it seems to be a specific design for mobile device: http://www.ekdesigns.co.uk/Upload/m-signup. I'm not sure how mobile responsive your actual website. For now, could you please try the following:

    1. First, please do check your CSS code in your Form Designer Tool, there seems to be an error on it specific to this section:

    Mobile Form button and font size isnt quite appearing correctly Image 1 Screenshot 20

     

    2. May we also know, if you scroll down on your Kindle device, can you see the whole submit button with the correct alignment? You might not be seeing the whole submit button because there's a white border at the bottom that seem to cut off part of the form itself.

    I hope that helps.

  • ekdesigns
    Replied on October 16, 2016 at 10:34 AM

    Thanks for your quick reply.  Basically yes the issue is that the text on the button itself isn't aligned centrally on the kindle fire unlike on my iphone.  I managed to remove the issue you pointed to above, but it's still the same otherwise.  And yes, when scrolled it's still as shown.  I don't believe it's cut off by anything.

    Thanks, Esther.

  • Jan
    Replied on October 16, 2016 at 10:59 AM

    Are you referring to the issue where the text "Send" inside the submit button is not vertically align in the center?

    Mobile Form button and font size isnt quite appearing correctly Image 1 Screenshot 20

    If yes, then the problem is with the height of the Iframe. It is set to 228px which is why it is cut-off. Please increase the Iframe height to 245px.

    <iframe id="JotFormIFrame-62885184315361" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/62885184315361" frameborder="0" style="width: 100%; height: 245px; border: none;" scrolling="no"> </iframe>

    Hope that helps. Thank you.

  • ekdesigns
    Replied on October 16, 2016 at 11:23 AM

    The thing is, on jotforms embed via iFrame area, it says the height is 539px.. although I can see that in reality the actual area of the form is only 225px or so, so I lengthened the html fragment that I placed the iframe code in, but it still hasn't changed.

    Anything I missing?

    Esther.

  • Mike
    Replied on October 16, 2016 at 3:52 PM

    The iFrame comes with an auto height script by default. Please remove the script that is following the iFrame code, and then use the code provided by Jan.

    Mobile Form button and font size isnt quite appearing correctly Image 1 Screenshot 20

    Thank you.

  • ekdesigns
    Replied on October 16, 2016 at 4:40 PM

    Ahh brilliant, works perfectly, thank you so much!