How do I change width of specific labels?

  • mychelleblake
    Asked 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 

  • Boris
    Replied 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:

    How do I change width of specific labels? Image 1 Screenshot 40

    And this is Chrome:

    How do I change width of specific labels? Image 2 Screenshot 51

    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:

    How do I change width of specific labels? Image 3 Screenshot 62

    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.

  • mychelleblake
    Replied 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_C
    Replied 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!