Can’t seem to apply CSS styles using media queries

[Givan]

Givan

February 6, 2018 at 3:36 am

Hi there!

I was wondering if you could assist us with the following problem.

When we try to call CSS styles using media queries in Theme Options/Custom CSS Box they don’t produce any kind of effect. One example is that we tried to change the appearance of a ninja registration form. The CSS styles work on desktop view but they don’t seem to work on mobile view.

We have the following code targeting the registration form on this page:

hr.ninja-forms-field {
border: 0px
}

#nf-field-46 {
width: 100%;
border: 0px;
background-color: #9C9C9C;
color: white;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
}

#nf-field-46:hover {
width: 100%;
border: 0px;
background-color: red;
color: white;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
}

@media (max-width: 992px) {
.ninja-forms-field {
border: 1px solid #B5B5B5;
padding: 5px;
}

#nf-field-272 {
width: 100%;
border: 0px;
background-color: #9C9C9C;
color: white;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
}

#nf-field-272:hover {
width: 100%;
border: 0px;
background-color: red;
color: white;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
}

hr.ninja-forms-field {
border: 0px
}

#nf-field-46 {
width: 100%;
border: 0px;
background-color: #9C9C9C;
color: white;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
}

#nf-field-46:hover {
width: 100%;
border: 0px;
background-color: red;
color: white;
padding: 10px 0px 10px 0px;
text-transform: uppercase;
}
}

Any ideas why this doesn’t seem to work?

Thank you!