How can I optimize my form to react to both desktop and mobile screens?

I have a simple form which I have developed for tracking educational units for my association's membership. It displays fine on a desktop; however, I have been getting reports the form does not display correctly on mobile devices (iphone and ipad). I was looking at some of the strings in the forum, but I am a novice through-and-through. Is there a way I can modify my form without having to spend the next month educating myself on coding? Is there a canned code I might be able to copy and paste into my form?

Any help would be appreciated.

Regards,

Tim

Hi Tim,

I took a look at your jotform and it seems that it is already optimized for mobile with many fields, exception would be the configurable list widget and the file upload widget.

Now for file upload widget you can add this code:

#id_22, #id_22 iframe {
    max-width: 95%;
    overflow: hidden;
    width: 100%;
}

You can see here how to inject the CSS into your jotform: Inject Custom CSS Codes

The configurable list widget however requires a bit more workaround to properly work so I would like to ask you for a bit more time to see the best code that would work for that.

Best Regards,
Ben

Hi Tim,

OK, this is what I ended up with which seems to be working properly for me:

http://form.jotformpro.com/form/50017038577959

The CSS I have added is next:

#id_22, #id_22 iframe {
    max-width: 95%;
    overflow: hidden;
    width: 100%;
}

This CSS is added like the one above, following these steps: Inject Custom CSS Codes

Now the following code would not be inserted into jotform, but instead into the Configurable List widget custom CSS code field.

#list .col1, #list .col2, #list .col3, #list .col4, #list .col5, #list .col6 {
     float: left;
     max-width: 210px;
}
#list .col1 {
  width: 130px;
}
#list .col2 {
  width: 90px;
}
#list .col3 {
  width: 210px;
}
#list .col5 {
  width: 200px;
}
#list .col4 {
  width: 90px
}
#list > tbody > tr:first-child {
    display: none;
}
td.col1:before {
     content: "Title";
     display: block;
}
td.col2:before {
     content: "Course Type";
     display: block;
}
td.col3:before {
     content: "Date Attended";
     display: block;
}
td.col4:before {
     content: "Total CEUs";
     display: block;
}
td.col5:before {
     content: "Brief Description";
     display: block;
}
.col6.buttonsColumn {
    display: block;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
}

If you notice, the column names are now in CSS, and we will hide the ones that are usually shown in order to be mobile compatible so if you need to alter any of them, please do so in the CSS as well (do not remove the ones in the settings as they are required to stay there even if they are no longer shown).

Do let us know how this works for you.

In case you are used to responding through email, I would advise to come to this thread instead as at the moment our maintenance team is working on a part of our system, which could lead to us not receiving your response sent over email. This is the link to your thread: http://www.jotform.com/answers/489742

Best Regards,
Ben

Ben,

I reviewed the "insert" article, and simply did a copy/paste of the code you provided.  I then looked at the preview and noted the combined widget still seemed to push beyond the borders of the form.  Could you verify I entered the code correctly?  I am not sure if this link is what you need, but here it is again.

http://form.jotform.us/form/42805751867161

Thank you for your help on this.

-Tim

I see that the second part of the code provided by my colleague was injected into the Form Custom CSS part instead of Widget's custom CSS as suggested.

This part of the CSS code needs to be removed from here and injected to Widget's Custom CSS code. Click on the Wand icon to open the Configurable list widget wizard.

Now, on the Configurable List widget window, scroll down to Custom CSS and paste the CSS code.

Please add this code to the widget css and check if the is resolved. Please get back to us if you need any further help.

Thanks!