Trouble with CSS Customizations

Hello @carnagelp

The behavior of the form is responsive by default, displaying the label at the top of fields. But you are not using the correct layouts in the plugin. You have defined the fields’ structures with custom styles.

The correct would be to select the “Right Aligned” option for the “Label Placement” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png).

About your other styles, if there are CSS rules that are not applied to the elements, defined them with the !important; modifier. For example:

#fbuilder .cff-button-field input{background: red !important;}

Best regards.

I feel so stupid right now. Wasted so much time when all it took was that one setting change (facepalm!). Thanks a ton!

The !important modifier also pretty solved most of my other issues. Except 2:

1) Separator fields margin/padding settings aren’t working even if I use the modifier.
2) Slider color opacity. I used the opacity:1 code and used !important but the slider still shows a light shade of the color I’ve set.

Oh and how do I get rid of the blue vertical bar on the left side of the separators and the fieldset label? As well as that faint gray line on the left side of the fieldset area? They seem to be default inbuilt in the form template.

Hello @carnagelp

Please, let me know the styles you have defined.

Best regards.

SECTION BREAK code:

.cp_cff_11 #fbuilder .fields.section_breaks
{ 
		margin-top:20px !important; 
		margin-bottom:20px !important;
		background-color: transparent !important;
		border: 0;
		border-top: 1px solid #f0f0f0 !important;
		height: 1px;
		margin: 2rem auto;
		text-align: center;
		width: 80%;
}
.cp_cff_11 #fbuilder .fields.section_breaks>label{font-size:1.3em;font-weight:900;text-transform: none !important;border-bottom:1px solid #dcdcdc}
	.cp_cff_11 #fbuilder .fields.section_breaks .section_break{border:0;}

SLIDER CODE:

#fbuilder .cff-slider-field .slider
{
background:#DADADA;
border-radius: 10px !important;
border:0 !important;
height: 0.3em !important;
}
#fbuilder .cff-slider-field .ui-slider-handle
{
	background:#f0557b !important;
	opacity:1 !important;
	border:0 !important;
	top: -0.35em !important;
height: 1em !important;
border-radius: 0.15em !important;
width: 1em !important;
}
#fbuilder .cff-slider-field .ui-slider-range
{
background:#f0557b;
border:0;
height:5px;
background-image: linear-gradient(to right,#f0557b,#f0557b)!important;
}
#fbuilder .cff-slider-field .dfield.slider-container
{
padding-left: 10px !important; 
border-radius: 10px !important;
padding-right: 0px !important;
padding-top:5px !important;
}
#fbuilder .cff-slider-field .slider-caption
{
    font-family: "Rajdhani","Roboto", "Arial", sans-serif !important;
		font-size:20px;
		font-weight: 700;
		word-spacing: 1em;
}

IMPLEMENTATION ON THIS PAGE:
https://www.fitgirls4life.com/testing-calculators/?nocache=1

Hello @carnagelp

The changes are applied, but you have installed a plugin for caching the website. So, I you should purge the website’s cache to see your styles in action:

Best regards.

I don’t think you quite got the issues I’m talking about. The screenshot above still shows the problems I’m trying to fix.

1) The slider color is set to #f0557b. But the color seen above is a much lighter shade of that. Looks like opacity:35% or something. I’m trying to remove the opacity so the #f0557b color appears as is.

2) The separator margin/padding above and below is lesser than what I’ve set it. Even if I add a higher value or add !important it’s still not changing.

3) I had asked for how to remove those vertical blue lines on the left side of the separator (and also in the fieldset label). No idea how to do that.

PS: I’m always checking the page with ?nocache=1 so it loads a non cached version

Hello @carnagelp

If you set nocache=1, your website generates a new cache with the parameter. So, you should purge the cache in the plugin that manages it.

Responding to your questions:

To hide the blue line, you can use the style definition:

#fbuilder .fields.section_breaks{border:0 !important;}

To modify the opacity in the disabled sliders, you should use the style definition:

#fbuilder .ui-state-disabled{opacity:1 !important}

The margin-top and bottom you have defined for the section break fields were 20px, and it is the margin applied on your website.

Best regards.

The section break margins don’t change even if I change the numbers set. For example, I have now set it to 30px for top and bottom but it looks exactly the same.

Also, if you look carefully, you’ll see that the blank space between the element above the each section break is clearly smaller than the space below it; signifying different margins even though they’ve been set the same. This difference gets even bigger in mobile view. How do I make it uniform and actually change as per whatever setting I put in for margin-top and bottom?

The blue line hiding and opacity disabling worked btw. Thanks for that!

Oh, and how do I remove this line: https://ibb.co/wgw8txs

Hello @carnagelp

The space above and below the line in the section breaks is not only controlled by the margin. The section breaks have applied 10px of padding, and the line is the border-top. So, you have ten additional pixels below the line. If you want to remove them, you should use:

#fbuilder .section_breaks{padding:0 !important;}

Note, you have an HTML content field below the section break. If you want to hide it, enter the hide class name through its attribute: “Add CSS Layout Keywords.”

About the line at the left of the results, you have inserted them into a fieldset field. Please, use the style definition:

#fbuilder fieldset{border:0 !important;}

I’m sorry, but we cannot implement your project through the WordPress forum. If you need additional help customizing your form, you should request a custom coding service through our private website: Custom Coding Service.

Best regards.

Both of the above fixed the issues. Thanks again!