title: Overriding google recaptcha css to make it responsive
body: <p>I installed <a href="https://developers.google.com/recaptcha/docs/php" rel="noreferrer">Google Recaptcha </a> in a site (not a Wordpress site or Joomla) So do not offer any WP plugins or Joomla Extension :) </p>
  
  <p>My problem is, the site is responsive and recaptcha is not. When I use Firebug to find its styles I realized that not only the library that Google provides does not contain the css files, and I can't override them in my custom-styles.css file because Google, very thoughtfully, applied the <code>!important</code> selector hack to EVERYTHING in their css, but I even tried classing it so that I can make a breach and hopefully override Google's styles but then the plugin doesn't work:(</p>
  
  <p>Any ideas? </p>
  
  <p>p.s. I am not using a different re-captcha either. Sorry. I'm sure there are some recaptcha geeks out here ;) </p>
  
  <p>Here is the HTML. This is what the recaptcha.php renders from the server. THIS IS NOT WHAT i I HAVE IN THE ACTUAL PHP PAGE...(Don't have a CSS, and that is the main problem) </p>
  
  <pre><code>&lt;div id="recaptcha_widget_div" style="" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"&gt;&lt;div id="recaptcha_area"&gt;&lt;table id="recaptcha_table" class="recaptchatable recaptcha_theme_red"&gt; 
    &lt;tbody&gt;
       &lt;tr&gt; 
          &lt;td colspan="6" class="recaptcha_r1_c1"&gt;&lt;/td&gt; 
       &lt;/tr&gt; 
       &lt;tr&gt; 
          &lt;td class="recaptcha_r2_c1"&gt;&lt;/td&gt; 
          &lt;td colspan="4" class="recaptcha_image_cell"&gt;
              &lt;center&gt;&lt;div id="recaptcha_image" style="width: 300px; height: 57px;"&gt;
                    &lt;img id="recaptcha_challenge_image" alt="reCAPTCHA challenge image" height="57" width="300" src="http://www.google.com/recaptcha/api/image?c=03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"&gt;&lt;/div&gt;
              &lt;/center&gt;
           &lt;/td&gt; 
           &lt;td class="recaptcha_r2_c2"&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr&gt; 
           &lt;td rowspan="6" class="recaptcha_r3_c1"&gt;&lt;/td&gt; 
           &lt;td colspan="4" class="recaptcha_r3_c2"&gt;&lt;/td&gt; 
           &lt;td rowspan="6" class="recaptcha_r3_c3"&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr&gt; 
           &lt;td rowspan="3" class="recaptcha_r4_c1" height="49"&gt; 
                &lt;div class="recaptcha_input_area"&gt; 
                    &lt;span id="recaptcha_challenge_field_holder" style="display: none;"&gt;                      
                        &lt;input type="hidden" name="recaptcha_challenge_field" id="recaptcha_challenge_field" value="03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"&gt;&lt;/span&gt;
                        &lt;input name="recaptcha_response_field" id="recaptcha_response_field" type="text" autocorrect="off" autocapitalize="off" placeholder="Type the text" autocomplete="off" style="font-style: italic;"&gt; 
                             &lt;span id="recaptcha_privacy" class="recaptcha_only_if_privacy"&gt;&lt;a href="http://www.google.com/intl/en/policies/" target="_blank"&gt;Privacy &amp;amp; Terms&lt;/a&gt;&lt;/span&gt; 
                &lt;/div&gt; 
            &lt;/td&gt; 
            &lt;td rowspan="4" class="recaptcha_r4_c2"&gt;&lt;/td&gt; 
            &lt;td&gt;&lt;a id="recaptcha_reload_btn" title="Get a new challenge"&gt;
                &lt;img id="recaptcha_reload" width="25" height="17" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" alt="Get a new challenge"&gt;&lt;/a&gt;&lt;/td&gt; 
            &lt;td rowspan="4" class="recaptcha_r4_c4"&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr&gt; 
            &lt;td&gt;&lt;a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge"&gt;
                 &lt;img id="recaptcha_switch_audio" width="25" height="16" alt="Get an audio challenge" src="http://www.google.com/recaptcha/api/img/red/audio.gif"&gt;&lt;/a&gt;&lt;a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="Get a visual challenge"&gt;
                 &lt;img id="recaptcha_switch_img" width="25" height="16" alt="Get a visual challenge" src="http://www.google.com/recaptcha/api/img/red/text.gif"&gt;&lt;/a&gt;
            &lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr&gt; 
            &lt;td&gt;&lt;a id="recaptcha_whatsthis_btn" title="Help"&gt;
                 &lt;img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/red/help.gif" alt="Help"&gt;&lt;/a&gt;
            &lt;/td&gt; 
        &lt;/tr&gt; 
        &lt;tr&gt; 
            &lt;td class="recaptcha_r7_c1"&gt;&lt;/td&gt; &lt;td class="recaptcha_r8_c1"&gt;&lt;/td&gt; 
        &lt;/tr&gt; 
    &lt;/tbody&gt;
   &lt;/table&gt; 
  &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what I do have in the page</p>
  
  <pre><code>  require_once('recaptchalib.php');
    $publickey = "your_public_key"; // you got this from the signup page
    echo recaptcha_get_html($publickey);
  </code></pre>
  
  <p>And here is my problem</p>
  
  <p><img src="https://i.stack.imgur.com/dxw9H.png" alt="enter image description here"></p>