I was considering posting this query on the Wordpress Stack Exchange platform, but it's more related to CSS than Wordpress.
Unless I need to delve into the CSS files of a plugin to customize the styles, should I go there to ask this question?
I am trying to override some important CSS styles that are being applied either by my theme (Genesis Framework with a customized Minimum Pro child theme) or the Gravity Forms plugin.
On this page, you can see that I have a form which resizes with the window. At 500px width, I want all select and input fields to have a width of 100%. I have identified the specific location in my media queries and added the code there. However, because there is a width: 95% !important; set somewhere (not in my stylesheet), my 100% setting is getting overwritten by 95%.
Here are the styles I want to override:
.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 the overall override style I want to apply to ALL forms:
@media only screen and (max-width: 500px)
input, select, textfield {
width: 100%!important;
}
Since this is related to Wordpress, I don't have the HTML code, but I have captured a screenshot of the CSS styles (you can also view this by right-clicking on one of the inputs).
My question is, how can I overwrite these top-level styles with my media query set width? I have tried adjusting the styles but it seems like I might be missing something. Hopefully not?
UPDATE:
So, I have included the two different sets of styles provided by Alexander O'Mara and Fabio, but neither of them worked for me. I have commented out Alexander O'Mara's code in this snippet. You can see how I am 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 have set it up so that when the styles are applied, either a blue border shows up around them in Alexander O'Mara's snippet or a red border shows up when Fabio's snippet works. However, so far, as I toggle between them, I have had no luck.
It seems like it is completely ignoring these styles. Any insights on this issue would be greatly appreciated.