Form is not showing properly (scaling) up on Mobile Devices

  • Profile Image
    dominologic
    Asked on May 26, 2014 at 01:53 PM

    The for is nor scaling to size on mobile devices...

    Please advise.

  • Profile Image
    Mike_T
    Answered on May 26, 2014 at 02:49 PM

    Thank you for contacting us.

    The form is scaling on my side, but I have noticed slight issues with the width of email and address fields. Please try injecting the following CSS to your form in order to fix mendioned issue.

    @media only screen and (max-device-width: 550px) {
    span.form-sub-label-container + span.form-sub-label-container {
    margin-right: 0;
    }

    .form-address-table select,
    .form-address-postal,
    .form-address-city,
    .form-address-state,
    .form-address-table,
    .form-address-line,
    .form-address-table .form-sub-label-container {
    width: 100%;
    }

    .form-address-table td, .form-address-table th {
    padding-bottom: 10px;
    padding: 0 0px 10px 0px;
    }

    .form-textbox, .form-textarea, .form-dropdown {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    input[type=email] {
    width: 200px;
    }
    }

    Please give it a try and let us know if you need any further assistance.

  • Profile Image
    dominologic
    Answered on May 26, 2014 at 04:47 PM

    I have two other forms that are password protected on the website (you can see them in my account) -

    am I able to use this css on all the forms to correct the issue?

    Where do I add the css?

     

    Thanks so much

  • Profile Image
    jonathan
    Answered on May 26, 2014 at 06:15 PM

    @ dominologic

    Hi, please follow this user guide on -How-to-Inject-Custom-CSS-Codes

    The CSS code provided by Mike_T might only work on the current form and not on the other forms since they might have different fields or component on them.

    BUT I checked the 2 other forms on your account, and I think the CSS code might still work since most fo the fields used have similar class. I suggest you try also and check.

    Please inform us if you need further assistance.

    Thanks!