How to Increase the Usability of My Form on Mobile?

Hello,

How can I make everything in the form bigger in length? Because when I view it on my tablet it is hard to press it with one finger but I want it bigger so I can click on it with ease. Maybe someone can help me with CSS, or maybe there is an button that does this.

Thanks in advance,

Owen

Hi Owen,

You can increase the font size, weight or etc. by injecting some custom CSS to your form. Below, you will see the CSS that makes the font of your form bigger and bold.

.form-all{

font-weight:bolder;

font-size:24px !important;

}

If the changes are not meet your needs, we can do something more to increase your form's usability.

Thanks.

Hi Mert,

This was exactly what I was looking for! Except there is one problem. Everything becomes bigger except for the configurable list widget. Is there a way to make that bigger vertically too?

Thanks in advance,

Owen

On behalf of my colleague @Mert, you are kindly welcome. We are very glad to hear that the issue has been resolved for you.

Can you add the CSS code to your configurable list widget?

I hope it helps.

If this does not resolve the issue, please let us know and we will be glad to take another look.

Hello,

Well I tried it and it did not do anything.

Can you please try again?

Thanks in advance,

Owen

Hi again,

Owen, I have been working on this issue to find a solution. When I find the correct solution, I will post the answer.

Thank you for your patience.

Hello Mert,

Thank you for taking your time and looking it up.

-Owen

Please use this CSS code on the Configurable List widget

th{

font-weight:bolder;

font-size:24px !important;

}

so it should make the font size bigger

Here is my test form https://form.jotform.com/53431613019952?

Let us know how it goes.

Thanks.

Hi again,

Unfortunately, there is an issue about custom CSS part on "Configurable List" widget, so the changes don't applied to the widget on preview. Now, I'm going to open a bug report about this one. With that, our widget team will be found a fix for that problem as soon as possible.

Thank you for your understanding.

Hi Mert,

No problem, thank you for looking it up. I hope you guys have a great day!

Owen

You are most welcome. Please, accept my apologies about this one; but you can be sure that it will be fixed soon. When the fix is released, you will be informed on this thread.

Have a great day.

Hello Owen, 

The Custom CSS tab has been fixed - Your Custom CSS will apply the desired changes to your Configurable list widget.

Kindly add the suggested CSS and see if that fixes your layout requirements. 

If you need further assistance - please let us know. 

Hi Titus, 

I tried the CSS Beril gave me, but it still did not work. I think it's not working because the CSS was for the wrong configurable list widget. Can someone help me with a new CSS code to make this configurable list widget larger vertically?

Thanks!

Owen

Hi again,

Owen, if you apply the following CSS code it makes the "Configurable List" larger vertically.

td{

padding-bottom: 250px; /* This one makes it larger vertically*/

padding-right:25px; /* This one gives space between dropdowns (you can erase this one, if you dont want this feature)*/

}

Please, try this one and let us know the results. Also, I suggest you to clear your browser caches before doing this steps.

Thanks.

Hi Mert,

The CSS code that you gave me made it larger horizontally but not vertically.

Maybe it is only on my end, can you confirm?

Thanks,

Owen

Hello Owen,

It appears smaller on my end too, 

Please add the following CSS to all your Configurable List Widgets  using the Custom CSS tab: 

/*The CSS below increases the Vertical Heights of the Input , Select and Button Elements*/

select {

    height: 31px;

}

input[type="text"] {

    height: 25px;

}

button {

    height: 31px;

}

.stepper-wrap {

    height: 31px;

}

/*Height CSS End*/

Don't delete the CSS you have in there, add the code above right below it. 

Looks better? You can sample the changes here: https://form.jotform.com/53511865015956?

Owen, I monitored the customized form on Chrome and it looks like larger vertically and horizantally (Now, I added the Titus's CSS, the input boxes and the selectors are larger currently). Please, see it what I see on my side:

Thanks guys! 

It looks exactly how I pictured it.

Owen

On behalf of my colleagues, you are kindly welcome. It took a long time to come this point, sorry for this; but finally, I'm glad to see that it works for you. For your other questions, please don't hesitate to contact us.

Have a great day.