Embedded Form Cut Off on Mobile View

Hello,

Can you tell me how to fix this form being cut off on mobile version:

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

Thank you

Shannon

Hi Shannon,

Thanks for reaching out to Jotform support. I accessed your form using an iOS mobile device but couldn’t replicate the issue. Checkout the screencast below:

Can you take a screenshot of what's happening and share it with our Support Forum so that I can have a better idea of what's going on and help you with this? This guide will show you how to do that. Also, could you let us know the model of the phone you’re using and which browser you’re on? This will help us look into it further.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Hi Shannon, 

You can also Inject CSS Codes into your form to adjust the size if it's accessed on mobile view. 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.

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.