html - how do responsive recaptcha images -
html - how do responsive recaptcha images -
i designed recaptcha bootstrap 3. need show recaptcha image in 100% responsive theme.
html :
<div class="form-group"> <div class="captcha"> <div id="recaptcha_image"></div> </div> </div> <div class="form-group"> <div class="recaptcha_only_if_image">enter words above</div> <div class="recaptcha_only_if_audio">enter numbers hear</div> <div class="input-group"> <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="form-control input-lg" /> <a class="btn btn-default input-group-addon" href="javascript:recaptcha.reload()"><span class="icon-refresh"></span></a> <a class="btn btn-default input-group-addon recaptcha_only_if_image" href="javascript:recaptcha.switch_type('audio')"><span class="icon-volume-up"></span></a> <a class="btn btn-default input-group-addon recaptcha_only_if_audio" href="javascript:recaptcha.switch_type('image')"><span class="icon-picture"></span></a> </div> <script> var recaptchaoptions = { theme: 'custom', custom_theme_widget: 'recaptcha_widget' }; </script> <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6lcrk9csaaaaalecjg9gtrpbea0yavskd8sbpfpr"></script> <noscript> <iframe src="http://www.google.com/recaptcha/api/noscript?k=6lcrk9csaaaaalecjg9gtrpbea0yavskd8sbpfpr" height="300" width="500" frameborder="0"></iframe> <br/> <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea> <input type="hidden" name="recaptcha_response_field" value="manual_challenge" /> </noscript> </div> css:
#recaptcha_image img { width:100% } how resize images recaptcha responsive design?!
demo : fiddle
try setting captcha container 100% well
.captcha, #recaptcha_image, #recaptcha_image img { width:100% !important; } fiddle: here
html css css3 twitter-bootstrap recaptcha
Comments
Post a Comment