Text field overflow on jotform (ios7/safari)

  • Profile Image
    barclay21
    Asked on December 20, 2013 at 12:14 PM

    Hi there 

    you kindly fixed the rest of my jotform but the final text/comments field is still overflowing the width of the page in Wordpress.

    Any CSS tweak I can add for that?

    Many thanks

  • Profile Image
    EltonCris
    Answered on December 20, 2013 at 02:11 PM

    @barclay21

    I can see the two email fields and textarea overflowing, the following CSS should fixed it.

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

    .form-textarea, input[type="email"]{

    width: 210px !important;

    }

    }

    If I've missed something, let us know here. Thanks!

  • Profile Image
    EltonCris
    Answered on December 20, 2013 at 02:13 PM

    Sorry, here's the updated one including the textarea text label.

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

    .form-textarea, input[type="email"], #label_13{

    width: 210px !important;

    }

    }

  • Profile Image
    TitusN
    Answered on December 20, 2013 at 03:12 PM

    Hello, 

    Here's an alternative for responsive width that you might want to try along with the other suggestions: 

    Replace all your custom CSS with this: 

    @media only screen and (max-device-width: 450px)

    .recaptchatable,

    #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th {

    width: 90%;

    }.form-all {

    max-width: 450px;

    width: 100%;

    }

    #id_13,

    #id_2,

    #id_10,

    #id_16,

    #id_17,

    #id_15,

    #id_23,

    #id_26,

    #id_25,

    #id_20,

    #id_24{

    width: 100%;

    }

    #input_24 {

    width: 90%;

    }

    #input_15 {

    width: 90%;

    }

    #input_13 {

    width: 90%;

    }

    .form-line-error input:not(#coupon-input), .form-line-error textarea, .form-validation-error {

    width: 90%;

    }

    .form-buttons-wrapper {

    float: none!important;

    margin-left: 50%!important;

     

    }

    The Captcha filed has elements nested inside with fixed widths and postitions, you may have to play around with it. 

    Does this help?

    Please let us know.