Overwriting forced wordpress CSS styles

Question

I was thinking of putting this on the wordpress stackexchange site but it has to do more with CSS then Wordpress.

However unless I have to go into some plugin css files to customize the css then I have to go there and ask this question?

I'm looking to overwrite some !important css styles that are coming from either the theme I have (Genesis Framework with a customized Minimum Pro child theme) or the gravity forms plugin.

You'll see here on this page that I have a form that resizing with the window. At 500 px I want all the select and input fields width to be 100%. I've located the specific spot in my media queries and placed the code there. However because width: 95% !important; has been set some where (not in my stylesheet) my 100% is being overwritten with 95%.

These are the styles I'd want to overwrite

.gform_wrapper .ginput_complex input[type=text], 
.gform_wrapper .ginput_complex input[type=url], 
.gform_wrapper .ginput_complex input[type=email], 
.gform_wrapper .ginput_complex input[type=tel], 
.gform_wrapper .ginput_complex input[type=number], 
.gform_wrapper .ginput_complex input[type=password], 
.gform_wrapper .ginput_complex select {
    width: 95% !important;
}

.gform_wrapper .ginput_complex .ginput_right input[type=text], 
.gform_wrapper .ginput_complex .ginput_right input[type=url], 
.gform_wrapper .ginput_complex .ginput_right input[type=email], 
.gform_wrapper .ginput_complex .ginput_right input[type=tel], 
.gform_wrapper .ginput_complex .ginput_right input[type=number], 
.gform_wrapper .ginput_complex .ginput_right input[type=password], 
.gform_wrapper .ginput_complex .ginput_right select {
    width: 95% !important;
}

This is my overall overwrite style I'd like to apply to ALL forms

@media only screen and (max-width: 500px)
input, select, textfield {
width: 100%!important;
}

Because this is wordpress I don't have the HTML but I've taken a screenshot of the css styles (you can also right click on the one of the inputs and see this as well).

My question is how do I overwrite these top level styles with my media query set width?

I've played with the styles but obviously I've missed something? Hoepfully?

UPDATE:

Okay, so I included the two different sets of styles laid out by Alexander O'Mara & Fabio, but neither worked?

I've commented out Alexander O'Mara code for this code snippet. But you can see how I'm implementing both of them.

@media only screen and (max-width: 500px) {

    a.alignright, img.alignright, .wp-caption.alignright {
            width: 100%;
    }

    .gform_wrapper ul li.gfield {
        width: 100%!important;
    }

    .ginput_left, .ginput_right { 
        width: 100%!important; 
        margin-top: 1.5em;
    }

    input, select, textfield { width: 100%!important;}

    .ui-datepicker-trigger { display: none;}

    .gform_wrapper .ginput_complex input[type="text"] {width: 100%!important;}

    .header-image .site-title a {
        background-size: contain !important;
        margin: 0 auto;
        max-width: 300px;
        padding: 11% 0;
    }


    /*.apply-now-form_wrapper .top_label input.medium, 
    .apply-now-form_wrapper .top_label select.medium {
        width: 100%!important;
        border: 2px solid blue;
    }*/

    html .gform_wrapper .ginput_complex input[type=text],
    html .gform_wrapper .ginput_complex input[type=url],
    html .gform_wrapper .ginput_complex input[type=email],
    html .gform_wrapper .ginput_complex input[type=tel],
    html .gform_wrapper .ginput_complex input[type=number],
    html .gform_wrapper .ginput_complex input[type=password],
    html .gform_wrapper .ginput_complex select {
        width: 100% !important;
        border: 2px solid red !important;
    }

}

I set it up so that when the style is applied either blue border shows up around them in Alexander O'Mara's snippet or a red border shows up with Fabio's snippet works. So far, as I toggle them back and forth, no luck.

It's like it's COMPLETELY ignoring these styles??

Answer 1

You can override !important styles with a !important style of a more-specific selector. For example, to override the following rules.

.gform_wrapper .ginput_complex input[type=text],
.gform_wrapper .ginput_complex input[type=url],
.gform_wrapper .ginput_complex input[type=email],
.gform_wrapper .ginput_complex input[type=tel],
.gform_wrapper .ginput_complex input[type=number],
.gform_wrapper .ginput_complex input[type=password],
.gform_wrapper .ginput_complex select {
    width: 95% !important;
}

You could prefix all the rules with html like so.

html .gform_wrapper .ginput_complex input[type=text],
html .gform_wrapper .ginput_complex input[type=url],
html .gform_wrapper .ginput_complex input[type=email],
html .gform_wrapper .ginput_complex input[type=tel],
html .gform_wrapper .ginput_complex input[type=number],
html .gform_wrapper .ginput_complex input[type=password],
html .gform_wrapper .ginput_complex select {
    width: 100% !important;
}

The same technique will work for your other case. You also don't have to use the gform classes, you could substitute them for 2 other classes that the elements you are trying to override are descendants of.

Answer 2

got the issue. The style sheet is deep targeting elements with their class names, so your general override will do nothing for them, will only be applied to elements that don't have those classes.

So, you need to change

input, select, textarea {
    width: 100% !important;
}

to

.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
    width: 100% !important;
}
.apply-now-form_wrapper .top_label input.medium, .apply-now-form_wrapper .top_label select.medium {
    width: 100% !important;
}

and whatever element you wanna target.

Now, it's more than evident that your style override is exactly the same that has been already declared, so really don't understand the need for this. But if you want to apply another style later, here you have your answer