CODEWITHSUNDEEP
twitter-bootstrap-3responsive-designrecaptcha
sam
sam

Reputation: 81

Override Google's new reCaptcha to make it responsive

I am struggling to find a way to override google's new recaptcha styling. I believe the new version loads its styling from within the api JS file.

Would anyone know how to override this to make it responsive within bootstrap?

<script src="https://www.google.com/recaptcha/api.js?render=onload"></script>
<div class="g-recaptcha" data-sitekey="key"></div>

Upvotes: 2

Views: 6687

Answers (4)

Surya R Praveen
Surya R Praveen

Reputation: 3745

Use the below mentioned code

.g-recaptcha {transform: scale(0.85); transform-origin: left top;}

Upvotes: 2

Alex Altotsky
Alex Altotsky

Reputation: 11

I would add just one more things to Boukraa Mohamed idea:

.g-recaptcha > iframe

This way it will work even if the iframe down-inside of multiple div tags.

Upvotes: 1

Boukraa Mohamed
Boukraa Mohamed

Reputation: 21

just make the iframe responsive like this 

.g-recaptcha{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
  }
  .g-recaptcha iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
  }
this will make it res

Upvotes: 2

Bass Jobsen
Bass Jobsen

Reputation: 49054

Your question makes not clear which properties you want to override.

The Google's code loads an iframe in the div with class g-recaptcha. The iframe has its own styles sheets. You can manipulate the style sheets in an iframe with javascript or jQuery, see: How to apply CSS to iframe?.

Before using jQuery to manipulate the style sheets you should make sure that the iframe had loaded. See: https://developers.google.com/recaptcha/docs/display#explicit_render it seems that the api does not provide a function to trigger this onload event.

Upvotes: 0

Related Questions