My form becomes too long on mobile devices and cuts off submit button. Is there a CSS injection fix to this?

  • Profile Image
    lukeschenkel
    Asked on November 18, 2013 at 11:52 AM

    I love that your forms are mobile optimized, however sometimes this leads to display problems depending on where and how a form is embedded into a page. I am assuming there is a CSS fix to this, I am just not sure how to do it without screwing up the desktop version.  Any help is appreciated!

    I have included a mobile screenshot and the link to the desktop page of the form that I am having problems with.

  • Profile Image
    EltonCris
    Answered on November 18, 2013 at 01:32 PM

    Hi,

    Form label on mobile views is set to top, that's why if you've observed the fields are under its labels unlike when you view it on a desktop. This creates an extra length on your form.

    You can make the form label to display just like how it looks on a desktop. Simply inject the following CSS codes to your form.

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

    .form-label-left{

    display:inline !important;

    float:left !important;

    }

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Let us know if this doesn't help so we can assist you further. Thank you!