Overriding google recaptcha css to make it responsive

Question

I installed Google Recaptcha in a site (not a Wordpress site or Joomla) So do not offer any WP plugins or Joomla Extension :)

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 !important 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:(

Any ideas?

p.s. I am not using a different re-captcha either. Sorry. I'm sure there are some recaptcha geeks out here ;)

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)

<div id="recaptcha_widget_div" style="" class=" recaptcha_nothad_incorrect_sol recaptcha_isnot_showing_audio"><div id="recaptcha_area"><table id="recaptcha_table" class="recaptchatable recaptcha_theme_red"> 
  <tbody>
     <tr> 
        <td colspan="6" class="recaptcha_r1_c1"></td> 
     </tr> 
     <tr> 
        <td class="recaptcha_r2_c1"></td> 
        <td colspan="4" class="recaptcha_image_cell">
            <center><div id="recaptcha_image" style="width: 300px; height: 57px;">
                  <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"></div>
            </center>
         </td> 
         <td class="recaptcha_r2_c2"></td> 
      </tr> 
      <tr> 
         <td rowspan="6" class="recaptcha_r3_c1"></td> 
         <td colspan="4" class="recaptcha_r3_c2"></td> 
         <td rowspan="6" class="recaptcha_r3_c3"></td> 
      </tr> 
      <tr> 
         <td rowspan="3" class="recaptcha_r4_c1" height="49"> 
              <div class="recaptcha_input_area"> 
                  <span id="recaptcha_challenge_field_holder" style="display: none;">                      
                      <input type="hidden" name="recaptcha_challenge_field" id="recaptcha_challenge_field" value="03AHJ_VutTaFjCI-gV3f3W2_M6gix7arVpF-9EOz-f773U5LmDrl33mKCn9wMXYGe0t8-xy-1HD0ysHzOI_NYyOtxOxD_a4Jj5G5h4bDMalKBQ5PDJaaE6ur8K44ilzimisHHYX6xZJ4y9xeuP6lT4vQa59-nNPju3VrlolnYgbM6oKgD7el1Rr9cpbRojjc_2zFraHkTjxyUU"></span>
                      <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;"> 
                           <span id="recaptcha_privacy" class="recaptcha_only_if_privacy"><a href="http://www.google.com/intl/en/policies/" target="_blank">Privacy &amp; Terms</a></span> 
              </div> 
          </td> 
          <td rowspan="4" class="recaptcha_r4_c2"></td> 
          <td><a id="recaptcha_reload_btn" title="Get a new challenge">
              <img id="recaptcha_reload" width="25" height="17" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" alt="Get a new challenge"></a></td> 
          <td rowspan="4" class="recaptcha_r4_c4"></td> 
      </tr> 
      <tr> 
          <td><a id="recaptcha_switch_audio_btn" class="recaptcha_only_if_image" title="Get an audio challenge">
               <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"></a><a id="recaptcha_switch_img_btn" class="recaptcha_only_if_audio" title="Get a visual challenge">
               <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"></a>
          </td> 
      </tr> 
      <tr> 
          <td><a id="recaptcha_whatsthis_btn" title="Help">
               <img id="recaptcha_whatsthis" width="25" height="16" src="http://www.google.com/recaptcha/api/img/red/help.gif" alt="Help"></a>
          </td> 
      </tr> 
      <tr> 
          <td class="recaptcha_r7_c1"></td> <td class="recaptcha_r8_c1"></td> 
      </tr> 
  </tbody>
 </table> 
</div> 
</div>

This is what I do have in the page

  require_once('recaptchalib.php');
  $publickey = "your_public_key"; // you got this from the signup page
  echo recaptcha_get_html($publickey);

And here is my problem

Answer 1

Changed auto height and media query

@media only screen and (max-width : 480px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }

}