CSS not displaying when styling contact form

[RocktheHouse1876]

I have added css to Pro global css for my contact form 7 to reveal a look like so…

However, that “look” doesn’t seem to be applied. What must I be doing wrong? I’ve troubleshooted much with no luck, please help! Also, would there be a way to get the label under each line, instead of above it?

Below is the css that was added:

    .wpcf7 select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-bottom: 2px solid red !important;
    color: #555;
    border-radius: 0px !important;
    box-shadow: inset 0 0px 1px rgba(0,0,0,0.0) !important;
}

[rad]

Hi @RocktheHouse1876,

Thanks for reaching out.

It’s because of the CSS added before that form CSS. You have this CSS

@media (max-width: 979px) {
.x-btn-navbar {
color: #fff !important;
}

You should have close the bracket for @media, for example

@media (max-width: 979px) {
.x-btn-navbar {
color: #fff !important;
}
}

And because there is no closing bracket, any CSS added below it will be applied to 979px. Hence, not seeing it being applied for desktop.

Thanks!

[RocktheHouse1876]

I was looking in the wrong place… thank you pointing this out!

[nabeel]

Glad that we could be of help.

Cheers!