Need help aligning my embedded form on mobile device

  • CreativKits
    Asked on February 22, 2018 at 6: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?

    Jotform Thread 1393102 Screenshot
    Page URL: https://creativkits.com.au/pages/funds4schools
  • TREVON
    Replied on February 22, 2018 at 9: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.


  • Gagan
    Replied on February 22, 2018 at 5: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 Screenshot 10

  • Gagan
    Replied on February 22, 2018 at 5:02 PM

    Also adding photo confirm that CSS was applied.1519336966Screen Shot 2018 02 23 at 9 Screenshot 10

  • Kevin Support Team Lead
    Replied on February 22, 2018 at 7:36 PM

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

    .form-all{

      margin-left: auto !important;

      margin-right: auto !important;

    }

    Result: 

    Need help aligning my embedded form on mobile device Image 10

    I hope this helps. 

  • Gagan Agrawal
    Replied on February 22, 2018 at 9: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 Screenshot 10

    1519354429Screen Shot 2018 02 23 at 1 Screenshot 21

  • tina JotForm Developer
    Replied on February 23, 2018 at 3: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 Screenshot 10

    This view will be the result of the CSS code:

    1519375453Screen Shot 2018 02 23 at 11 Screenshot 21

  • Gagan Agrawal
    Replied 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 Screenshot 10

  • Support_Management Jotform Support
    Replied on February 25, 2018 at 3:56 AM

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

    Need help aligning my embedded form on mobile device Image 1 Screenshot 30

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

    Need help aligning my embedded form on mobile device Image 2 Screenshot 41

    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.