Custom CSS not working on frontend

Hello @erezspeiser

In the form’s preview, only the styles defined by the plugin affect the form’s fields. However, the public website loads the styles defined by the theme active, and they affect every tag on the page. For this reason, in some cases, it is required to define the CSS rules with the !important; modifier.

I’ve checked your form, and some styles were defined with incorrect selectors. Please, try replacing your styles block with the following ones:

#fbuilder p.left-name {
	font-size:1.5em!important;
}
#fbuilder .fieldname9_1,
#fbuilder .fieldname2_1,
#fbuilder .fieldname1_1,
#fbuilder .fieldname10_1,
#fbuilder .fieldname6_1,
#fbuilder .fieldname7_1,
#fbuilder .myfield {
	width:200px!important;
	text-align:center;
}

form {
	width:650px!important;
}

@media screen and (max-width: 767px) {
form {
	width:100%!important;}
	#fbuilder div.fields {
		text-align:center!important;
		margin:auto!important;
	}
}

#fbuilder .fields {
	text-align:center !important;
}

#fbuilder .fform h2 {display:none !important;}
#fbuilder .fform{text-align:center;}

Best regards.

Hi
Thanks for your reply.
It did not solve the problem.
As I mentioned in my original post when you check with the inspector of the browser developer tools, you see that the CSS rules don’t apply at all. If they were overwritten they would have appeared with a strikethrough.

I took the CSS code, deleted it from the CSS box and pasted it enclosed with <style></style> inside an HTML field at the top of the form. Now the CSS work just fine.
You can have a look here: https://www.machiningdoctor.com/calculators/inch-to-metric/
And compare it to the original form with the CSS in the normal placement:
https://www.machiningdoctor.com/cff-css-isue/

It is not a critical issue, but I prefer to work in the “normal way”

Many Thanks
Erez

Hello @erezspeiser

If there is a plugin active on your WordPress for optimizing the website and managing the cache, please, check it is not removing the block of styles. About your solution, it is valid.

Best regards.