Custom CSS not working

Hi,

I’ve checked your webpage and the form design looks good, please, look the screenshot in the following link:

https://wordpress.dwbooster.com/customdownloads/2016-09-23/screenshot.png

Could you tell me exactly what is wrong with your form, please?

Best regards.

Yeah, that is without my custom styling. I removed the top borders and made bottom borders to sections, added spacing, and styled the buttons. All of this was working before, but no longer works.

This is all the css I have for styling:

#formheader_1 {
display: none !important;
}

.section_break {
padding-top: 30px !important;
border-top: 0 !important !important;
}

#fieldname46_1.section_break,#field_1-42.fields.comment_area {
padding-top: 0 !important;
}

#field_1-42.fields.comment_area {
margin-top: -20px !important;
}

.page-id-31196 h2,.page-id-31196 h3 {
padding-bottom: 0 !important;
}

#fbuilder .fields,#fbuilder .fform {
padding: 15px 0 !important;
}

.section_breaks {
border-bottom: 1px solid #e2e2e2 !important;
}

@media only screen and (max-width: 739px) {
#fieldname43_1.section_break {
margin-top: -60px !important;
}
}

#fieldname69_1,#fieldname68_1,#fieldname115_1,#fieldname91_1,#fieldname92_1,#fieldname96_1,#fieldname103_1,#fieldname104_1,#fieldname105_1,#fieldname106_1,#fieldname131_1,#fieldname132_1 {
background: #fff !important;
color: #ce0e0e !important;
}

#field_1-29 label,#field_1-30 label,#field_1-44 label,#field_1-45 label,#field_1-46 label,#field_1-47 label,#field_1-52 label,#field_1-53 label,#field_1-54 label,#field_1-55 label,#field_1-56 label {
font-weight: 700 !important;
}

@media screen and (max-width: 739px) {
.macros.fields.column4 {
float: left !important;
width: 24.9% !important;
}
}

.fiber.macros.fields.column4 {
float: left !important;
width: 32px !important;
}

#macro-calculator-results.field.valid {
-webkit-appearance: none !important;
width: 100% !important;
height: 60px !important;
font-size: 1.17em !important;
}

#fieldname121_1.field.reset-button {
-webkit-appearance: none !important;
width: 100% !important;
height: 60px !important;
font-size: 1.17em !important;
background: #e2e2e2 !important;
color: #777 !important;
}

#field_1-22.fields.results.hide {
padding-top: 40px !important;
}

#fieldname68_1,#fieldname69_1,#fieldname91_1,#fieldname92_1,#fieldname96_1,#fieldname103_1,#fieldname104_1,#fieldname105_1,#fieldname106_1,#fieldname115_1 {
padding-left: 0 !important;
}

#fieldname131_1,#fieldname132_1,#field_1-48.fields.fiber.macros.column4,#field_1-49.fields.fiber.macros.column4 {
padding: 0 !important;
}

#field_1-48.fields.fiber.macros.column4,#field_1-49.fields.fiber.macros.column4 {
margin-top: -7px !important;
}

I added !important to them all to see if that made it work again, but it did not help.

Hi,

Please, try the following solution:

– Insert a “HTML Content” field in the form, and enter the piece of code below as its content:

<style>
#formheader_1 {
display: none !important;
}

.section_break {
padding-top: 30px !important;
border-top: 0 !important !important;
}

#fieldname46_1.section_break,#field_1-42.fields.comment_area {
padding-top: 0 !important;
}

#field_1-42.fields.comment_area {
margin-top: -20px !important;
}

.page-id-31196 h2,.page-id-31196 h3 {
padding-bottom: 0 !important;
}

#fbuilder .fields,#fbuilder .fform {
padding: 15px 0 !important;
}

.section_breaks {
border-bottom: 1px solid #e2e2e2 !important;
}

@media only screen and (max-width: 739px) {
#fieldname43_1.section_break {
margin-top: -60px !important;
}
}

#fieldname69_1,#fieldname68_1,#fieldname115_1,#fieldname91_1,#fieldname92_1,#fieldname96_1,#fieldname103_1,#fieldname104_1,#fieldname105_1,#fieldname106_1,#fieldname131_1,#fieldname132_1 {
background: #fff !important;
color: #ce0e0e !important;
}

#field_1-29 label,#field_1-30 label,#field_1-44 label,#field_1-45 label,#field_1-46 label,#field_1-47 label,#field_1-52 label,#field_1-53 label,#field_1-54 label,#field_1-55 label,#field_1-56 label {
font-weight: 700 !important;
}

@media screen and (max-width: 739px) {
.macros.fields.column4 {
float: left !important;
width: 24.9% !important;
}
}

.fiber.macros.fields.column4 {
float: left !important;
width: 32px !important;
}

#macro-calculator-results.field.valid {
-webkit-appearance: none !important;
width: 100% !important;
height: 60px !important;
font-size: 1.17em !important;
}

#fieldname121_1.field.reset-button {
-webkit-appearance: none !important;
width: 100% !important;
height: 60px !important;
font-size: 1.17em !important;
background: #e2e2e2 !important;
color: #777 !important;
}

#field_1-22.fields.results.hide {
padding-top: 40px !important;
}

#fieldname68_1,#fieldname69_1,#fieldname91_1,#fieldname92_1,#fieldname96_1,#fieldname103_1,#fieldname104_1,#fieldname105_1,#fieldname106_1,#fieldname115_1 {
padding-left: 0 !important;
}

#fieldname131_1,#fieldname132_1,#field_1-48.fields.fiber.macros.column4,#field_1-49.fields.fiber.macros.column4 {
padding: 0 !important;
}

#field_1-48.fields.fiber.macros.column4,#field_1-49.fields.fiber.macros.column4 {
margin-top: -7px !important;
}
</style> 

and please, let me know the results.

Best regards.

So close to working! Everything is great, but the top border (dotted line) of sections still appears… How can I remove these? It doesn’t seem to want to remove them.

Nevermind, I just made it transparent. I really appreciate the quick and helpful support! Thanks!