How can we change the width of a single field only?

Got another issue when it comes to your forms. I've been trying to adjust
the designs in a way that ONLY the phone number width widens because it's
currently too small but it won't let me without changing the width of the
other fields too. How can I fix this?

This depends on where you are in the form Designer and to what you are applying the CSS code.

To explain this a bit further, I will take it as if you are not familiar with CSS and start from some basics.

If you click on the element and see that the text string for it starts with a dot (.) for example: .className it means that you are changing the class.

The class is the way to change a lot of fields in the same time (all of those with the same class).

The most common class on a form is .form-textbox which is in the TextBox, Email, Phone and few other fields.

The second most common class is .form-textarea which allows you to style all of the textarea elements.

Now in designer we get to select these classes by clicking on some field (only once) and is the default way to style within both tabs on the right.

Now, the other thing to know is that there are also IDs. They start with the # sign, so if you see #someID you can be sure that this is style for a single field only.

To use this, you should go to CSS tab in your Form Designer and double click on the field that you want to style, and you will immediately see it showing that # at the start.

So to summarize, when changing the style of a single element, we want to use ID (starts with #), but if we want to apply the style to all elements with the same class, we use the class instead (starts with .).

I would also like to suggest taking a look at the following video guides here: Video Course: Form Designer Basics to show you how this all works as well :)

Now in regards to Mobile Phone field on your form here: http://form.jotform.me/form/52536568397470 you can change its width by using its ID:

#input_64_full {}

For width, to take the entire width, you could use something like this:

#id_64 .form-sub-label-container {

    width: 100%;

}

- The reason why I used the ID of its top parent and the class of its direct parent is that the number field was already using 100% of the width, but this parent (.form-sub-label-container) did not.

As you can see I have used both ID and the class above, which meant that the all fields of that class under that specific ID should be the ones to change their style (width in this case).

I hope that this helps.

Please do let us know how it goes, and if you have any additional questions, while the CSS code above should be added after all the other code in your CSS while following the steps here: Inject Custom CSS Codes