How to move the sublabels below labels and above the dropdown menus with CSS?

Now I'll need your help on Part 2, shifting the sublabels directly under the main labels. Thanks!

Hi Kimia,

Thanks for reaching out to Jotform Support. Moving the sublabels below the labels is easy, you will just need to inject a CSS code. Let me show you how:

1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
2. Next, click on the Style tab.
3. Scroll down to Inject Custom CSS and paste the code provided below:

/* Code to Move the sublabel below the label and above the dropbox - 15732321 */

#input_5, #input_8, #input_9 {

    position: relative;

    top: 45px;

}

#sublabel_input_5, #sublabel_input_8, #sublabel_input_9, #sublabel_input_10, #sublabel_input_31 {

    position: relative;

    bottom: 60px;

}

#input_10 {

    position: relative;

    top: 61px;

}

#input_31 {

    position: relative;

    top: 17px;

}

/* Code Ends Here */

That's it. After injecting this CSS code, you will be able to see the result on your live form. Here you can test this demo form or clone it to better understand how it was configured. 

Result:

Give it a try and reach out again if you have any other questions.

Hi, unfortunately this does not seem to have worked. After pasting the code, the sublabels are still under the dropdown box, and once again the dropdown box and text have been pushed too far to the right, instead of being next to the images (please see below).

Hi Kimia,

I just reviewed your form, and currently it has unnecessary dots (.) on it, which is why the CSS code is not working as shown in the screenshot.

I have removed all the dots(.) on the CSS code. Please replace all your form existing CSS code with the one provided below.

.form-label.form-label-auto {        

      display: block;

      float: none;

      text-align: left;

      width: 100%;

}

li#id_18, li#id_28, li#id_29, li#id_30, li#id_32 {

  width: calc(25% - 8px);

}



li#id_5, li#id_8, li#id_9, li#id_10, li#id_31 {

  width: calc(55% - 8px);

}



/* Code to Move the sublabel below the label and above the dropbox - */

#input_5, #input_8, #input_9 {

    position: relative;

    top: 45px;

}

#sublabel_input_5, #sublabel_input_8, #sublabel_input_9, #sublabel_input_10, #sublabel_input_31 {

    position: relative;

    bottom: 60px;

}

#input_10 {

    position: relative;

    top: 61px;

}

#input_31 {

    position: relative;

    top: 17px;

}

/* Code Ends Here */

Give it a try and let us know how it goes.

Everything now seems to be in order, thank you very much!