Messed up Fields on mobile phones

  • EffieMcNair
    Asked on February 7, 2016 at 9:43 AM

    Hi There,

    Could you please check why is my form all messed up on mobile phones? I tried to follow the instructions in your guide also tried the widget without much luck.

    I have attached the URL. The first form is not too bad (a simple one) but the rest are messed up.

     

    Thanks

    Effie

    Page URL: http://transaustremovals.com.au/quote-request/
  • Elton Support Team Lead
    Replied on February 7, 2016 at 1:55 PM

    That's because of the CSS codes you've injected/added in your form with !important rule that is overpowering the mobile CSS.

    These are the following:

    Messed up Fields on mobile phones Image 1 Screenshot 30

    Messed up Fields on mobile phones Image 2 Screenshot 41

    I suggest to get rid of this CSS codes or enclose them with media query that only executes on larger screens e.g. desktop but not on mobile.

    Example:

    @media screen and (min-width:1024px){

    /**place all your desktop style below this line like the following**/

    #label_242{

    max-width:70px !important

    margin:0 10px 0px 105px !important;

    }

    /**end of desktop styles**/

    }

    And please remove !important if enclosing it with media query doesn't help.

    If you need further assistance, do let us know.