-
iconic_productionsAsked on October 21, 2017 at 10:28 PM
I am trying to use the CSS codes to only alter the width of a field with 4 radio buttons.
I created 4 columns, but the 3rd option is too long and is positioned correctly. I can't seem to change the spacing for just that input field.
I am referring to the Radio Button "Are there any photos or images that were taken regarding the issues." and am talking about the 3rd option.
-
Support_Management Jotform SupportReplied on October 22, 2017 at 3:26 AM
To confirm, you wanted to increase the space between Yes, photos and video (3rd option) and No (4th option), highlighted in yellow below:
All 4 options are evenly spaced with similar widths though. The reason why it looks misaligned was because the 3rd option has a longer label. Nonetheless, if you want the 4th one to be moved a bit further to the right, try the following CSS codes:
#cid_340 span:nth-child(3) {
margin-right: 30px !important;
}
Result:
Complete guide: How-to-Inject-Custom-CSS-Codes
-
iconic_productionsReplied on October 22, 2017 at 4:14 AM
Thank you for that. it worked.
Can you though explain to me how you figured the CSS code, so that if I have to do it to another form, I can without having to ask for support for each section.
For instance,
1) how did you work out it was #cid_340 span:
2) what is nth-child
3) why did you write the 3 after nth-child
-
Support_Management Jotform SupportReplied on October 22, 2017 at 5:35 AM
We're all using the browser console to inspect any part of the form. This same principle applies to any website (not just JotForm).
1) how did you work out it was #cid_340 span
It's the container of the radio buttons. And each option is within a span element.
2) what is nth-child
Here are some online resources I found after Googling online:
https://www.w3schools.com/cssref/sel_nth-child.asp
https://css-tricks.com/how-nth-child-works/
3) why did you write the 3 after nth-child
Because the element I'm targeting is the 3rd span.
We can't teach you how to code in CSS so the best help that I can offer are online resources that will let you learn on your own.
The 2 URLs I provided above are really good websites to learn CSS.