Border Around Responsive Form

  • Profile Image
    tycoprinting
    Asked on September 02, 2016 at 10:42 AM

    We have the following for: https://form.jotform.com/62453833210145

    We added a border around it using the following code:

     

    .form-all {

       border:2px solid black !important;

        border-radius:5px;

        padding:10px;

    }

     

    While the form itself is responsive, the border size does not automatically enlarge or reduce like the form fields do.

     

    Any help would be appreciated.

  • Profile Image
    BDAVID
    Answered on September 02, 2016 at 11:45 AM

    Please try injecting the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    .form-all{

        height: 643px !important;

    }

    }

    Result:

    Let us know if you need more help.

  • Profile Image
    tycoprinting
    Answered on September 02, 2016 at 11:54 AM

    Thank you.  I added that code but it still does not size down like the fields do

     

    https://form.jotform.com/62453833210145

     

     

  • Profile Image
    BDAVID
    Answered on September 02, 2016 at 12:14 PM

    What mobile device are you using? Could you please share a screenshot of how it shows in your mobile device? Simply load the URL of this thread in your browser(URl: https://www.jotform.com/answers/923117), then include the screenshot as shown on this guide: https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum 

  • Profile Image
    tycoprinting
    Answered on September 02, 2016 at 12:19 PM

    Thank you.  It looks fine in mobile.  The issue is in desktop mode once we embed it into our site.  

     

    See the following link for a test page:  http://www.tycousa.net/page/bound-books

  • Profile Image
    BDAVID
    Answered on September 02, 2016 at 12:33 PM

    Please try embedding your form using the Iframe code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    tycoprinting
    Answered on September 02, 2016 at 12:42 PM

    Tried that but it didn't work either.  Same result.

  • Profile Image
    BDAVID
    Answered on September 02, 2016 at 01:04 PM

    I believe, this code will fix the problem: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-all {

        width: 94% !important;

    }

    Result:

    Please update us. 

  • Profile Image
    tycoprinting
    Answered on September 02, 2016 at 01:46 PM

    Thank you.  That worked but now the form is not completely left justified within it's column.  IS there a setting for that?

  • Profile Image
    tycoprinting
    Answered on September 02, 2016 at 01:52 PM

    Never mind.  Figured it out.

     

    Thanks for all your help.