Need help aligning my embedded form on mobile device

  • Profile Image
    CreativKits
    Asked on February 22, 2018 at 06:21 AM

    Hi,

    Please look at this page on mobile device https://creativkits.com.au/pages/funds4schools.

    This contain a Jotform which doesn't seem to be centre aligned.  It is slightly misplaced towards the left.  There is no option to centre align it in the centre through the form designer.

    Can you please help?

  • Profile Image
    TREVON
    Answered on February 22, 2018 at 09:37 AM

    Apologies for challenges you are facing.

    Kindly try injecting the following css code to your form.

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

    .jotform-form {

        padding: 12px 0 0 0;

        margin-left: 20px;

    }

    @media screen and (max-width: 689px)

    .jotform-form {

        padding: 12px;

        margin-left: 20px;

    }

    Kindly do let us know if you need further assistance.


  • Profile Image
    Gagan 
    Answered on February 22, 2018 at 05:01 PM

    Hi there,

    Thanks, but the code doesn't work. 

    It doesn't seem to align even in the preview view.  See attached.

    1519336866Screen Shot 2018-02-23 at 8.58

  • Profile Image
    Gagan 
    Answered on February 22, 2018 at 05:02 PM

    Also adding photo confirm that CSS was applied.1519336966Screen Shot 2018-02-23 at 9.01

  • Profile Image
    Kevin_G
    Answered on February 22, 2018 at 07:36 PM

    Please try removing the previous code and injecting this one instead: 

    .form-all{

      margin-left: auto !important;

      margin-right: auto !important;

    }

    Result: 

    15193461681.png

    I hope this helps. 

  • Profile Image
    Gagan Agrawal 
    Answered on February 22, 2018 at 09:53 PM

    Thanks, that worked.  One more problem though.

    See the border at the bottom is abruptly unfinished.  The top is fine.

    1519354411Screen Shot 2018-02-23 at 1.53

    1519354429Screen Shot 2018-02-23 at 1.53

  • Profile Image
    tina
    Answered on February 23, 2018 at 03:44 AM

    Please re-inject the following code below in order to fix the issue you have mentioned above:

    .form-all{

     

      margin-left: auto !important;

     

      margin-right: auto !important;

     

      margin-bottom: 10px !important;

    }

    I hope it helps.

    1519375443Screen Shot 2018-02-23 at 11.4

    This view will be the result of the CSS code:

    1519375453Screen Shot 2018-02-23 at 11.4

  • Profile Image
    Gagan Agrawal 
    Answered on February 24, 2018 at 10:28 PM

    No, it didn't.  I tried increasing the margin as well but it didn't help.

    See the attachment.

    1519529323Screen Shot 2018-02-25 at 2.27

  • Profile Image
    Jim_R
    Answered on February 25, 2018 at 03:56 AM

    Your form doesn't look like this anymore when I checked it through the PREVIEW section of the FORM BUILDER:

    Or through an actual mobile device (Android using Chrome) while viewed on your website:

    I can only assume your issue is fixed. In case we're mistaken, please tell us how/where you're testing your form with so we can try to reproduce it.