Home Forums Virtue Theme Can’t seem to apply CSS styles using media queries

This topic is: resolved
Resolved
Posted in: Virtue Theme  
  • February 6, 2018 at 3:36 am #177970

    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!

    Sorry, this forum is for Premium customers only. Please Login to continue

    If you are using a free theme you can access support on wordpress.org by searching for the free theme and using the support tab.