How do I make a responsive form ?

  • Profile Image
    Atulbhandari
    Asked on March 03, 2014 at 06:40 AM

    Hie  My form is responsive  but I am  using some images on my form  which are not responsive  .please help

    Test Form link :-  http://form.jotformpro.com/form/40360636914958

    Here is my CSS

    @font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
    }
    /*--form header background--*/
    .form-header-group {
    background: transparent;
    border-bottom:0px !important;
    padding-top: 0px !important;
    .form-line {
    padding-top: -16px;
    !important;
    }
    color: #D4D4D4 !important;
    }
    body {
    background: url('http://maestro.onproductizing.com/wp-content/uploads/2014/01/pagebackground.jpg') repeat;
    }
    /*--textarea fixed width--*/
    .form-textarea{
    width: 513px !important;
    }/*--form background--*/
    .form-all{
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 900;
    background:url('http://www.productleadership.in/wp-content/uploads/2014/01/png-Copy-Copy-4.png') repeat;
    border: 2px #D4D4D4 solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -moz-box-shadow: 0px 0px 5px #D4D4D4;
    -webkit-box-shadow: 0px 0px 5px #D4D4D4;
    box-shadow: 0px 0px 5px #D4D4D4;
    padding-left: 12px;
    margin-top: 0px;
    }/*--textbox, textarea style--*/
    .form-textbox, .form-textarea{
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    padding: 8px 8px;
    color: #659F39;
    font-family: open sans;
    font-size: 12px;
    border: 1px #D4D4D4 solid;
    -moz-box-shadow: 0px 0px 5px #D4D4D4;
    -webkit-box-shadow: 0px 0px 5px #F4F4F4;
    box-shadow: 0px 0px 5px #F4F4F4;
    }/*--form label style--*/
    .form-label-top, .form-label-left, .form-label-right{
    color: #190707 !important;
    }/*--remove focus border--*/
    .form-textbox:focus, .form-textarea:focus{
    outline:none;
    }/*--move error below submit button--*/
    .form-button-error{
    display:block;
    }/*--remove error button--*/
    .form-error-message {
    display: none !important;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }/*--submit button move slightly left--*/
    .form-submit-button{
    margin-left:2px;
    }/*--add red border on error--*/
    .form-validation-error {
    border: 1px solid red !important;
    }
    .form-line-active {
    background-color:#CEECF5;
    }
    .form-section{
    margin: -5px; !important;
    }
    .form-line-column {
    margin-left:12px; }

     

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

    @media (max-width: 480px) {

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

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

    width: auto;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100%;

    }

    .form-all{

    width: 75%;

    }

    .form-sub-label-container {

    width: 100%;

    display:block;

    }

    }

     

  • Profile Image
    EltonCris
    Answered on March 03, 2014 at 08:47 AM

    Hi,

    Just insert the following CSS code between the media query.

    img{width:100%;height:100%;}

    So it should be like this:

    @media (max-width: 480px) {

    ...your existing CSS codes here

        img{width:100%;height:100%;}

    }

    Possible output:

    Hope this helps. 

    Regards!