Embedded Form Cut Off on Mobile View

  • RedIce
    Asked on April 28, 2025 at 9:06 PM

    Hello,


    Another form cut off on mobile version:


    https://www.one8tfitness.com.au/package-1/


    What is the best fix?


    Shannon

  • Lara JotForm Support
    Replied on April 29, 2025 at 6:10 AM

    Hi Shannon, 

    Thanks for reaching out to Jotform support. When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. It's really easy to fix, you just need to Inject CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    /*Makes form mobile responsive - 26556921*/
    @media screen and (max-width: 600px) {
      .form-label.form-label-auto {
        float: none;
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
      }
      .form-all {
        height: auto;
        padding: 20px;
      }
    }
    /*Code ends here*/

    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

    Embedded Form Cut Off on Mobile View Image 1 Screenshot 20 Don’t forget to re-embed your form on your webpage to make sure the changes take effect.

    Give it a try and let us know how it goes.

Your Answer