My 2-column form is not responive

  • myatllaw
    Asked on July 11, 2017 at 9:12 PM

    More importantly, the two column form overlaps is not responsive on iPhone. See two attached screen shots:

    My 2 column form is not responive Image 1 Screenshot 20

  • John_Benson
    Replied on July 12, 2017 at 2:43 AM

    I checked your account and I didn't see any forms that look exactly like the screenshot you have provided. May we know what is the Form Direct Link or Form ID so we can check it further?

    We'll wait for your response. Thank you.

  • myatllaw
    Replied on July 12, 2017 at 11:10 AM

    I put it up on a dev server for you to take a look. http://dev.white-dog.net/wp/

    thank you John!

  • John_Benson
    Replied on July 12, 2017 at 1:02 PM

    Thank you for providing the Page URL.

    Please add this Custom CSS Code to your form:

    #input_8 {

        position: initial !important;

    }

    To add a Custom CSS Code to your form, please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result:

    My 2 column form is not responive Image 1 Screenshot 20

    Please contact us again if you have questions. Thank you.

  • myatllaw
    Replied on July 12, 2017 at 1:33 PM

    We are close. However, I need the message box to move under the phone number and before the submit button. Is that possible?

  • John_Benson
    Replied on July 12, 2017 at 3:09 PM

    Please give me more time to check the issue further. I will contact you again once I have an answer or update via this thread.

    Thank you for your understanding.

  • aubreybourke
    Replied on July 12, 2017 at 3:09 PM

    This requires more than CSS. You need to add your name, email, and phone number to a div. Then you can float the two columns side by side.

     

    Heres an example:

    <!DOCTYPE HTML>
    <head>
    <style>
    .landscape{
    max-width: 1000px;
    mix-width: 300px;
    }
    .column1{
    float: left;
    clear:both;
    margin-right: 25px;
    }
    .column2{
    float: left;
    }
    .lastrow
    {
    clear:both;
    }
    </style>
    </head>
    <body>

    <div class="landscape">
     <div class="column1">
      <h1>Left Column</h1>
      <p>This is the first column</p>
     </div>
     <div class="column2">
      <h1>Right Column</h1>
      <p>This is the second column</p>
     </div>
    </div>

    <div class="lastrow">
    <input type=submit value="Submit">
    </div>
    </body>
    </html>

     


     

  • myatllaw
    Replied on July 12, 2017 at 3:22 PM

    Let me give it a try. I'll let you know.