Overwriting forced wordpress CSS styles [closed]

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?

Answer 1

Some of these plugins and frameworks allow you to disable the default styles which then allows you to copy theirs and then alter it for your theme. But let us say that isn't going to be possible. Then you need to have a higher CSS selector precedent than their CSS. The easiest way to copy their selector and then make sure your CSS is included after theirs.

@media only screen and (max-width: 500px)
  .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,
  .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: 100%!important;
  }
}

Answer 2

I am not sure you know CSS enough to understand what has happend. You tried to resize input, select, textfield in divs which width was set to other value . I suppose that if you place code correctly then input, select and textfield was indeed 100%... but 100% width of div wchich consist them. And this div might be 640px long or 80% long of other div.. and so on, and so on... The point is that you should resize those divs you have listed (I've checked and it works). All of inputs and other stuff will grow with it.. If not then resize input, select and textfield in those divs by :

    input select textfield .divname .secdivname{
values}

Best regards. Sorry for my english