-
mychelleblakeAsked on August 31, 2016 at 3:04 PM
I need to change the width of some specific form labels. I understand how to inject CSS but I can't figure out how to find the specific CSS marker for each specific label I want to change.
Direct link for the form is
https://form.jotform.com/62028572420146Page URL: https://form.jotform.com/62028572420146 -
BorisReplied on August 31, 2016 at 5:19 PM
To find out the specific ID of a label you wish to change, the easiest method is to open your form over its direct link (preview your form). There, you can right-click on a desired label in your browser, and select the Inspect Element option from the menu that opens. The option is similar in most browsers, for instance, this is Firefox:
And this is Chrome:
Once the browser tools open, you will be able to see the ID or class of the label you have selected. From the Firefox example shown above, the ID would be #label_23, as can be seen in the following image:
Now that you have the IDs of your desired labels, you can use them in your custom CSS. For example, to limit your desired label to have a width of 150 pixels, we could add this CSS code:
#label_23 {
width: 150px;
}If you need any further assistance, please let us know.
-
mychelleblakeReplied on September 1, 2016 at 1:23 AM
Thanks! I added the CSS changes and they don't seem to be taking any effect. Not sure if I entered them correctly?
-
Nik_CReplied on September 1, 2016 at 3:39 AM
Please try to insert !important attribute in your CSS, it should look like this:
#label_23 {
width: 300px!important;
}
Please let us know how it works for you.
Thank you!