Align submit button in mobile devices

  • Profile Image
    hell0wisp
    Asked on July 30, 2019 at 01:42 AM

    1. Can you help me get the submit button & back button (on the last screen) to always be aligned? I'm having trouble at different screen widths

    2. Does the form load slower on iphone? Seems like it's lagging a bit on iphone but not computer...


  • Profile Image
    jherwin
    Answered on July 30, 2019 at 02:53 AM

    1.) Please try these custom CSS code:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){button#input_18 {
        margin-top: 10px;
    }}

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

    2.) As far as I know, the loading for that depends on how fast your internet connection is. If your form loads HD or large-size images then it will load slow. However, if your internet connection speed is fast then loading those pictures are easy.

  • Profile Image
    hell0wisp
    Answered on July 30, 2019 at 01:43 PM

    Can you please look at my updated code one more time and help provide alignment at all different screen widths? 

    I 1) added what you said and 2) tried removing a few other things (below) but still not getting alignment.


    Thanks!


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

        button#form-pagebreak-back_5 {

            position : absolute;

            top : 110px;

            left : 38px;

        }


        .form-all .form-submit-button {

            position : absolute;

            top : -1px;

            left : 138px;

        }


    }


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

        button#form-pagebreak-back_5 {

            position : absolute;

            top : 174px;

            left : 36px;

        }


        .form-all .form-submit-button {

            position : absolute;

            top : 50px;

            left : 142px;

        }


    }


    button#form-pagebreak-back_5 {

        position : absolute;

        top : 107px;

        left : 9px;

    }


        position : absolute;

        top : -2px;

        left : 109px;

  • Profile Image
    jherwin
    Answered on July 30, 2019 at 02:22 PM

    I updated the CSS code of your form, kindly check the form using real devices and let us know how it goes.

    You can also test my demo form here: https://form.jotform.com/92105653463960

  • Profile Image
    hell0wisp
    Answered on July 30, 2019 at 06:15 PM

    It's still not aligned (for ALL widths)...

  • Profile Image
    BDAVID
    Answered on July 30, 2019 at 06:42 PM

    Could you let us know on which specific device? it seems to be aligned correctly:

    1564526309aligned.png

    Could you share a screenshot to illustrate how it shows in your end? https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

  • Profile Image
    hell0wisp
    Answered on July 31, 2019 at 12:52 AM

    Can you look at my CSS & try one more time, a few screens (including desktop) are off.


    Thank you!

  • Profile Image
    Nik_C
    Answered on July 31, 2019 at 02:28 AM

    I checked your CSS and adjusted it a bit. There was an issue with the Submit button since it wasn't aligned.

    Please check and let us know how it worked.

    Thank you!