Can you help me with CSS code for responsive form for phones and tablets

  • mcota4421
    Asked on August 31, 2016 at 4:49 PM

    Hey guys can you help me with providing me with css code for responsive
    form for phones and tablets for form named "2016-17 RMAC Dues"
    You guys were a great help last time!
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com

  • Kiran Support Team Lead
    Replied on August 31, 2016 at 4:57 PM

    You may make your JotForm mobile responsive by following the guide below:

    https://www.jotform.com/help/311-How-to-make-forms-mobile-responsive

    Also, please refer to the guide below for more information on making mobile friendly forms. 

    https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm

    If you need any further assistance, please let us know. We will be happy to assist. 

  • mcota4421
    Replied on September 2, 2016 at 8:45 PM
    Ok kind of frustrated. Can u help me with custome css to inject to the "NBA socks order" form please. I spent a few ours and it looks great but not on iPhone 6 Plus.
    Please help! I want to send this out tonight. 
    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    ...
  • Irshad
    Replied on September 3, 2016 at 5:08 AM

    Please check the below steps, how to inject custom css code:

    1. In the form builder, click the Design button from the main toolbar:

    Can you help me with CSS code for responsive form for phones and tablets Image 1 Screenshot 30

     

    2. Navigate to the Inject CSS tab and then insert your custom CSS codes under Inject Custom CSS box:

    Can you help me with CSS code for responsive form for phones and tablets Image 2 Screenshot 41

     

     

     

    3. Click the "Save Changes" button to save your form. 

    Let us know if face any issue, we will be glad to assist you. Thanks.

     

  • mcota4421
    Replied on September 3, 2016 at 9:45 AM
    I need for u guys to give me the code please. I know how to put it in just need actual code. 
    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    ...
  • jonathan
    Replied on September 3, 2016 at 10:30 AM

    I was able to see the mobile responsive issue on your form https://www.jotform.us/form/62436938311154

    Can you help me with CSS code for responsive form for phones and tablets Image 1 Screenshot 20

    Please allow us more time to identify the correct CSS codes needed to fix the responsive form issue.

    We'll get back to you as soon as we have update.

    Thanks.

  • mcota4421
    Replied on September 3, 2016 at 10:45 AM
    Please do and thank you for your time!
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • mcota4421
    Replied on September 4, 2016 at 2:45 PM
    Are you guys around? Would like to get this done today please...
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • David JotForm Support Manager
    Replied on September 4, 2016 at 5:47 PM

    Please try injecting the following code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    .header-logo-left{

        width: 200px !important;

    }

    #header_39{

        font-size: 1.7em !important;

    }

    }

    Result:

    Can you help me with CSS code for responsive form for phones and tablets Image 1 Screenshot 20

    Let us know if you need more help.

  • mcota4421
    Replied on September 19, 2016 at 9:46 AM

    Good morning everyone!Can u please provide me the CSS code to insert on the Marshall High School register form so that it lays out well on mobile phones also. Thanks.  
    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    ...

  • Nik_C
    Replied on September 19, 2016 at 11:17 AM

    Please try adding Mobile responsive widget to your form:

    Can you help me with CSS code for responsive form for phones and tablets Image 1 Screenshot 20

    I cloned your form and tested, it was working fine on mobile.

    Please try and get back to us if the issue persists.

    Thank you!

  • mcota4421
    Replied on September 19, 2016 at 11:46 AM
    Tried that before and it doesn't work well. Please provide CSS code. Thanks 
    Deep Dive Ref Admin Crew
    Info@deepdiveref.com
    www.deepdiveref.com
    "We WILL make you better"
    Sent from Mobile Outlook
    ...
  • Nik_C
    Replied on September 19, 2016 at 1:29 PM

    I checked your form further and the only issue I noticed, regarding the responsiveness, is the submit button:

    Can you help me with CSS code for responsive form for phones and tablets Image 1 Screenshot 60

    But when I removed your CSS code for Submit button:

    .form-submit-button {

        position : absolute;

        top : 30px;

        left : 120px;

        height : auto !important;

    }

    It showed fine:

    Can you help me with CSS code for responsive form for phones and tablets Image 2 Screenshot 71

    I run those tests in Simulator. And below are screenshots from my phone:

    Can you help me with CSS code for responsive form for phones and tablets Image 3 Screenshot 82Can you help me with CSS code for responsive form for phones and tablets Image 4 Screenshot 93Can you help me with CSS code for responsive form for phones and tablets Image 5 Screenshot 104

    It showed fine, I used Android Note3 phone.

    If you have further questions please let us know.

    Thank you!

     

  • mcota4421
    Replied on September 19, 2016 at 1:46 PM
    OK great so its ready to go! Thanks!
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • mcota4421
    Replied on September 20, 2016 at 4:46 PM
    hello all, how do we add a "print" button to the Marshall HS BBB Store?
    Administrative Staff
    Deep Dive Ref, LLC
    | info@deepdiveref.com | www.deepdiveref.com
    ...
  • Kiran Support Team Lead
    Replied on September 20, 2016 at 5:52 PM

    Your question is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/937493

    Thank you!