How can I get this form to be responsive and fluid on mobile devices?

  • Profile Image
    Asked on November 24, 2013 at 08:49 PM

    No matter what I try, I cannot get it to format properly on my iPhone 5s. The url to my iframe embedded form is:

    Please help :)

    I am using the latest wordpress self hosted site with customizr theme. I need this to retain the themes responsive settings.

    I have form width set to 100% in preferences/formstyles

    I have the following code injected in the settings/custom css area of jotform:

    .form-all input,select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    width: 140px;

    @media only screenand (min-device-width : 320px)and (max-device-width : 480px) {.form-all {width: 320px !important;}.form-line {padding-top: 0px !important;padding-bottom: 0px !important;padding-left: 3px !important;}img.form-image {max-width: 100% !important;height: auto !important;}#id_1.form-line {padding-left: 36px !important;padding-right: 36px !important;}}



    This is what it looks like on my phone ...

  • Profile Image
    Answered on November 25, 2013 at 03:41 AM

    Hi there,

    I was checking your form on iPhone and was able to reproduce the problem. This mostly occurs when the form is embedded since the form itself is made responsive. Please try to replace your current CSS codes for mobile with the following.

    /*-----------RESPONSIVE LAYOUT-----------*/

    @media (max-width: 480px) {




    width: 90% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;


    .form-label-left, .form-label-right{

    width: auto;



    margin-left:0 !important;


    .form-input {

    width: 90% !important;



    width: 90% !important;

    margin-left:0 !important;


    .form-sub-label-container {

    width: 90%;

    display: block !important;



    Please let us know if you need further assistance about this. Thanks!

  • Profile Image
    Answered on January 24, 2014 at 11:44 PM

    Hi Friends,

    I think I have same problem also. 

    Same theme as you and it is a responsive theme.

    When i minimize the browser window of chrome, all forms disappear..


    What can i do to recover it ?  

  • Profile Image
    Answered on January 25, 2014 at 02:59 AM

    @ leeqin1022 

    I have replied to your other thread here


  • Profile Image
    Answered on March 07, 2014 at 01:19 PM

    Oh WOW, thanks @EltonCris, I was looking for this solution. Your CSS Script Worked PERFECTLY