I would like my form to fill the mobile screen instead of be tiny

  • give2kids
    Asked on April 22, 2014 at 2:33 PM

    Hello,

    Re: Form: http://give2kids.com/mobile/donate.html

    I'd like my form to be responsive (fill the mobile screen, instead of be tiny).

    i'd also like the text size to be consistant.

    I have attempted to inject css from your previous answers to this question,
    but it is not working for me. 

    Please advise.

    Thank you 

  • TitusN
    Replied on April 22, 2014 at 4:33 PM

    Would you like your form to be as shown on this copy of your form? http://form.jotformpro.com/form/41116221520941

    I would like my form to fill the mobile screen instead of be tiny Image 1 Screenshot 30

    To achieve that, you can make the edits right on the form builder.

    Begin by remoging all your injected CSS,

    1. Select the field that is spilling out  - or seems longer than the desired fiorm width

    2. Click on "size" on the toolbar as shown

    3. Adjust the width, and you will see it reduce on the form

    4. Click OK and save your form

    I would like my form to fill the mobile screen instead of be tiny Image 2 Screenshot 41

    Please let us know if this helps.

  • give2kids
    Replied on April 22, 2014 at 6:07 PM

    Hello TitusN,

    I do not know how to "remog" the css.

    Here is a graphic to explain what I'd like the form to do:

    http://aliike.com/screenshot.jpg

    In other words, I'd like the form to respond to the mobile environment, by filling
    out the screen.

    Thank you for any help you can provide. 

  • Elton Support Team Lead
    Replied on April 22, 2014 at 8:49 PM

    @give2kids

    Since that form is for mobile use, inject the following CSS codes to your form but make sure to remove the existing CSS codes injected to your form first to avoid any possible conflicts.

    You can take the CSS codes here: http://pastebin.com/raw.php?i=D4EmJQnv

    Guide: How-to-Inject-Custom-CSS-Codes

    ---

    If you want the form to zoom or scale properly on mobile device, add the following meta codes on top of your donate.html file under <head> tag.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <metaname="HandheldFriendly"content="true" />  

    Hope this helps!

  • give2kids
    Replied on April 23, 2014 at 7:14 PM

    It works great, EltonCris. Thank you!


  • abajan Jotform Support
    Replied on April 23, 2014 at 9:50 PM

    On behalf of my EltonCris, you're quite welcome :).