Formatting issues when form is viewed on mobile

  • lasercorp
    Asked on September 26, 2019 at 6:08 PM

    I am having three issues:

    1. Submit button is not align to the right.

    2.When the form loads it is bigger than the screen size (img_0671), if you squeeze it with your fingers it formats well

    3. when we add the code to a html page the full bleed is not working : https://lasercorp.com/service/

    Any help would be great!

    Thanks,

    Genevieve

     

    Jotform Thread 1980030 Screenshot
    Page URL: https://www.jotform.com/build/92686246619975
  • John Support Team Lead
    Replied on September 26, 2019 at 6:50 PM

    Hi Genevieve,

    I can see that you have injected custom CSS codes to your form which may have caused the issue when the form is viewed on mobile.

    Let me conduct a few tests on your form and provide necessary CSS codes to make it more mobile-responsive. I will get back to you on this thread shortly.

  • John Support Team Lead
    Replied on September 27, 2019 at 10:52 AM

    Hi again,

    Apologies for the delay,

    Please try injecting this code to your form. It will align the Submit button with the Back Button:

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

    #input_104{

        border-radius: 0.2em;

        margin-top: 0.6em;

        margin-left: 170px!important;

        width:185px;

        height:40px;

    }

    }

    Please try that and let us know how it goes.


  • lasercorp
    Replied on September 27, 2019 at 1:45 PM

    I added this to the Jotform CSS and nothing.

    I also added it to my page as 

    <style>

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

    #input_104{

        border-radius: 0.2em;

        margin-top: 0.6em;

        margin-left: 170px!important;

        width:185px;

        height:40px;

    }

    }

    </style>

    Still nothing: https://lasercorp.com/service/ on mobile is TERRIBLE !!

  • Richie JotForm Support
    Replied on September 27, 2019 at 2:42 PM

    I have checked your form and it seems to be mobile responsive when using the direct form URL.

    The issue seems to be when you embed the form into your web page.

    Can you please try adding a met tag view point in your web page to scale your form.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    You can add the meta tag inside the <head> section.

    Example:

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    Let us know how it goes.

  • lasercorp
    Replied on September 27, 2019 at 2:52 PM

    definatly better, but still a little off...

    https://lasercorp.com/service/

  • lasercorp
    Replied on September 27, 2019 at 2:57 PM

    On mobile and tablet is you select printer requires service - the next page will not scroll so I am unable to get to the next button.

  • Richie JotForm Support
    Replied on September 27, 2019 at 3:23 PM

    We would have to enable scrolling in your Iframe

    Formatting issues when form is viewed on mobile Image 1 Screenshot 20

    and add this custom CSS in your style CSS

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

    #JotFormIFrame-92686246619975 {
        height: 100% !important;
        display: inline-block;
        position: absolute;
    }

    }


    Please give it a try and let us know if this fits your requirements.

  • lasercorp
    Replied on September 27, 2019 at 3:32 PM

    definately better- the back button does not work on the last page on mobile...on everything elese it does

  • Richie JotForm Support
    Replied on September 27, 2019 at 4:08 PM

    You have added a custom CSS in your form to edit your #input_104.

    Kindly add this CSS inside, you can add it below the height code.

    position: absolute;

    Formatting issues when form is viewed on mobile Image 1 Screenshot 20

  • lasercorp
    Replied on September 27, 2019 at 4:22 PM

    ok!! I think we got it :)