How do I change width of specific labels?

  • Profile Image
    mychelleblake
    Asked on August 31, 2016 at 03: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 

  • Profile Image
    Boris
    Answered on August 31, 2016 at 05: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.

  • Profile Image
    mychelleblake
    Answered on September 01, 2016 at 01: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?

  • Profile Image
    Nik_C
    Answered on September 01, 2016 at 03: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!