How to change the Form width to fill the mobile (phone) screen

Hi All,
I have questions of the Orbeon Form Builder when I using it to design the mobile (phone) based forms. In my case, I can render the form on my phone correct, but the problem is that the form's width is too wide, and it out of the screen width, so I have to drag/scroll the form to left/right to see other elements.
My questions is: how can I generate small screen based forms? I found that the form builder has set the form width to 940px, is there any way to change that? E.g. change it to 480px.

Btw, I found there have a link which has simple info of this part (http://wiki.orbeon.com/forms/doc/developer-guide/form-runner/styling#TOC-With-Orbeon-Forms-4.x),
-----------------
Starting with version 4.0, Orbeon Forms uses Bootstrap. The default width with Bootstrap is 940px, but you can change this by overriding the Bootstrap/Orbeon CSS. As usual, to do so, we recommend you use a tool like the Chrome DevTools to find the exact rules you need to override in your environment. For instance, with an out-of-the-box Orbeon Forms deployed as a servlet, you can set the width to 720px with:

.orbeon .container, .orbeon .span12 { width: 720px }
-----------------

I don't know where can change it. Can I get more details?

Thanks ,
Robin

Btw, can I generate 2 forms on form builder with different form width? E.g. one form is set to 740px, another is set to 480px.

Robin wrote

Hi All,
I have questions of the Orbeon Form Builder when I using it to design the mobile (phone) based forms. In my case, I can render the form on my phone correct, but the problem is that the form's width is too wide, and it out of the screen width, so I have to drag/scroll the form to left/right to see other elements.
My questions is: how can I generate small screen based forms? I found that the form builder has set the form width to 940px, is there any way to change that? E.g. change it to 480px.

Btw, I found there have a link which has simple info of this part (http://wiki.orbeon.com/forms/doc/developer-guide/form-runner/styling#TOC-With-Orbeon-Forms-4.x),
-----------------
Starting with version 4.0, Orbeon Forms uses Bootstrap. The default width with Bootstrap is 940px, but you can change this by overriding the Bootstrap/Orbeon CSS. As usual, to do so, we recommend you use a tool like the Chrome DevTools to find the exact rules you need to override in your environment. For instance, with an out-of-the-box Orbeon Forms deployed as a servlet, you can set the width to 720px with:

.orbeon .container, .orbeon .span12 { width: 720px }
-----------------

I don't know where can change it. Can I get more details?

Thanks ,
Robin

Any ideas?

Thanks,
Robin

Hi Robin,

Unfortunately, at this point, we can't leverage the responsive capabilities of Bootstrap as we're using tables to render grids. We have an issue for this:

https://github.com/orbeon/orbeon-forms/issues/70

We'll need to resolve this before the forms you design in Form Builder can be responsive, and say, automatically show in one column on a phone, and 2 or 3 columns on a tablet or PC. For now, if you're targeting mobile phones only, an option would be to just have one column, even if this isn't quite ideal.

Alex

Hi Alex,
Thanks for your suggestion. I noticed this issue, one column for phone should a workaround solution for now.

Thanks,
Robin