This tutorial aims to explain how to do to make the ReCaptcha security code from Google responsive. Indeed, by default, the robot checking module is not "responsive", that is to say that its dimensions do not adapt to his surroundings.

The new version of "noCaptcha" ReCaptcha is very convenient to use and integrate, but do not adapt to all situations, including mobile media.
As you can see in this example:



We will do to solve this reCaptcha module width is changind its scale. Initially we will apply the style directly on the div which have the class .g-recaptcha, this is the div in which the Google verification form is displayed.

To validate that it works, we are going to divide its size by 2 like this:

<div class="g-recaptcha" data-sitekey="your_key" style="transform:scale(0.50);-webkit-transform:scale(0.50);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>

Here is the result:



Now that we see that it works, we'll try to make this scale value dynamic using jQuery.

To do this, we'll select the div .g-recaptcha and its parent to take its width. Thus we will know the width that we have available. Then we will take the width available we have and divide is by the width of our reCaptcha module (302 pixels) to get the scale value.

Here is an example of JavaScript code using jQuery to do so:

var width = $('.g-recaptcha').parent().width();
if (width < 302) {
	var scale = width / 302;
	$('.g-recaptcha').css('transform', 'scale(' + scale + ')');
	$('.g-recaptcha').css('-webkit-transform', 'scale(' + scale + ')');
	$('.g-recaptcha').css('transform-origin', '0 0');
	$('.g-recaptcha').css('-webkit-transform-origin', '0 0');
}

We can see that sizes are now perfectly adapted:



Now to go further, you can add a recalculation of this scale value when the mobile goes to landscape to portrait or when the screen width changes. Further, it may need to take into account the margin or padding affecting the available width.

  Comments

Add a comment

Name / Nickname

Mail

Comment

Notify me when there is a new comment

Add