Adjust width using CSS

  • Profile Image
    kristyhunt
    Asked on May 17, 2013 at 11:34 AM

    Hello, I'm trying to adjust the width of my shrunken fields. I have grabbed the form ID and then inerted { width: xxxpx; } but it won't adjust. Am I doing something wrong?

  • Profile Image
    Morian
    Answered on May 17, 2013 at 12:20 PM

    Hello there! 

    Having checked the source code, you would need to look for codes like this

    <li class="form-line form-line-column" id="id_7">

    ...basically all under the "form-line form-line-column class" and then you can inject the CSS code to adjust each shrunken field to your desired size

    Example :

    #id_7 { width:250px; height:100px;} 

  • Profile Image
    abajan
    Answered on May 17, 2013 at 12:30 PM

    Hi Duane

    There's actually quite a bit that needs correcting in your CSS. There are several rules without selectors and a couple instances of selectors ending in commas. I'll see what I can come up with and get back to you. Then we can make additional adjustments as necessary.

    Thanks

  • Profile Image
    abajan
    Answered on May 17, 2013 at 01:04 PM

    Hi again

    Please replace your CSS with the following:

    #id_19, #id_23, #id_15 {
    width: 218px;
    }

    #id_11, #id_7, #id_9, #id_33 {
    width: 213px;
    padding-left: 5px;
    }

    #id_27 {
    width: 446px;
    }

    #input_19 {
    width: 100px;
    height: 50px;
    }

    #input_36 {
    width: 265px;
    }

    #input_17 {
    width: 198px;
    }

    #input_11 {
    width: 193px;
    }

    #input_9_0 {
    width: 64px;
    text-align: left;
    }

    #input_9_1 {
    width: 64px;
    text-align: left;
    }

    #input_9_2 {
    width: 64px;
    text-align: left;
    }

    #input_7_0 {
    width: 77px;
    text-align: left;
    }

    #input_7_1 {
    width: 77px;
    text-align: left;
    }

    #input_7_2 {
    width: 77px;
    text-align: left;
    }

    #input_23_0 {
    width: 70px;
    text-align: left;
    }

    #input_23_1 {
    width: 70px;
    text-align: left;
    }

    #input_23_2 {
    width: 70px;
    text-align: left;
    }

    #input_33 {
    width: 160px;
    }


    You can always let us know if additional adjustments need to be made.

    Thanks