How to shrink some input fields?

I have this in my css, works in your sim, not in my mobile (it expands again)

.form-input {

    width : 40px;

}

What can be the problem?

Thanks

Please try adding this custom CSS code into your form.

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)  {

.form-line, .form-line.form-line-column {

width: 50% !important;

}

}

You can adjust the "width" depending on what you like.

Here is the form I cloned from you.
https://form.jotform.com/73635914255966

Thank you.

Great! I'll continue with yours then, thanks!

Marvih, in your copy, at the end, "contacto", "local" "persona" apear only in one column to the left. I'd like it to take the whole space. How can you do that?

Thanks

The fields you're referring to are currently displaying like this: 

You may change them to this:

And you will only need to inject this code: 

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)  {

[data-type=control_fullname] .form-sub-label-container {

    width: 100%;

}

}

Another possibility is to change the fields like this: 

And you will only need to inject this code to achieve it: 

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)  {

li#id_23 {

    width: 100% !important;

}

}

This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

I hope this helps. 

Thanks Kevin_G, I think I understand a bit more now how this works now, great!!

How can I control the distance from one field to the other one (vertically)

How can I change the color of a field i select when i click (ex i select number in the dropdown menu and it gets yellow)

Thanks!!

To control the distance between each field vertically Kindly inject the CSS code below to your form. You can adjust the bottom or top distances according to your need.

.form-line {
    padding-top: 20px;
    padding-bottom: 36px;
}

To change the background when you highlight a dropdown, kindly inject the following code to your form. Kindly take note of the section in the code highlighted in red colour which is where you will replace with a colour code of your choice.

.form-line.form-line-active {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -ms-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  background-color: #ffffe0;
}

To inject CSS to your form kindly follow the guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Thanks Trevon!

To control the distance vertically i can only put more distance with your formula, i need to make them closer...

Kindly replace the CSS code:

.form-line {
    padding-top: 20px;
    padding-bottom: 36px;
}

withe the code below:

.form-line {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: -10px;
}
.form-collapse-mid {
    text-shadow: 0px 2px 0px #fff;
    float: left;
    font-size: 18px;
    margin-top: 16px;
    margin-right: 4px;
    margin-bottom: 16px;
    margin-left: 4px;
}

Kindly let us know if the code reduces the vertical space as intended.