Home » Best Way to Resize Google reCAPTCHA

Best Way to Resize Google reCAPTCHA

Last updated on December 24, 2020 by

Do you feel Google reCAPTCHA is not responsive? Do you want to resize the Google reCAPTCHA then you are at the right place.

reCAPTCHA is a free service from Google that helps to protect the websites from spam and abuse. A “CAPTCHA” is a test to distinguish humans and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure it out.

Normally, we are using the Google reCAPTCHA in Contact Form, Signup Form, Login Form, Member Registration Form, and many other areas. Let’s see different ways to do it. Are you ready? Let’s go then.

Table of Contents
1. Resize Google reCAPTCHA via Inline Style
2. Resize Google reCAPTCHA via Internal Style
3. Resize Google reCAPTCHA via an External Style
4. Resize Google reCAPTCHA for Mobile Devices

01 Via Inline Style

The easiest way of resizing Google recapture is by adding inline style. Inline styles are the CSS styles that applied directly to the HTML element by using the style attribute. Check the below example.

<div class="g-recaptcha" style="transform: scale(0.77); 
-webkit-transform: scale(0.77); transform-origin: 0 0;
-webkit-transform-origin: 0 0;" data-theme="light" 
data-sitekey="XXXXXXXXXXXXX"></div>

02 Via Internal Style

The second way, you can put style for reCAPTCHA into the page between <style> and </style>. An internal stylesheet is a section on an HTML page that contains style definitions. Internal stylesheets are defined by using the <style> tag within the <head> area of the document. Check the following example.

<style type="text/css">
.g-recaptcha {
	transform:scale(0.77);
	-webkit-transform:scale(0.77);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}
</style>

03 Via an External Style

An external stylesheet is a file containing only CSS syntax (no document content or elements) and should carry a MIME type of "text/css". The style information is not explicitly tied directly to the document’s elements, so selector syntax is used to specify what styles attach to which portions of the document tree.

Create a separate file and give a name like style.css and add this file link in between your element in your page like <link href="style.css" type="text/css">. Here is an example.

style.css

.g-recaptcha {
	transform:scale(0.77);
	-webkit-transform:scale(0.77);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

04 For Mobile Devices

Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good & be easy to use in all devices.

It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it looks good on any screen. You can consume the following example with any of the above stylesheet types.

<style type="text/css">
@media screen and (max-height: 767px){
	#rc-imageselect, .g-recaptcha {
			transform:scale(0.77);
			-webkit-transform:scale(0.77);
			transform-origin:0 0;
			-webkit-transform-origin:0 0;
		}
	}
</style>

That’s it for now. We hope this article helped you to learn the different ways to resize the Google reCAPTCHA for your website.

Additionally, read our guide:

  1. How to Select Data Between Two Dates in MySQL
  2. Error After php artisan config:cache In Laravel
  3. Specified Key Was Too Long Error In Laravel
  4. AJAX PHP Post Request With Example
  5. How To Use The Laravel Soft Delete
  6. How To Add Laravel Next Prev Pagination
  7. cURL error 60: SSL certificate problem: unable to get local issuer certificate
  8. Difference Between Factory And Seeders In Laravel
  9. Laravel: Increase Quantity If Product Already Exists In Cart
  10. How To Calculate Age From Birthdate
  11. How to Convert Base64 to Image in PHP
  12. Check If A String Contains A Specific Word In PHP
  13. Dynamically Populate A Select Field’s Choices In ACF
  14. How To Find Duplicate Records in Database
  15. Difference between del, remove and pop on lists
  16. How To Solve NPM Start Script Missing Error
  17. How To Declare A Global Variable in Vue
  18. How To Merge Objects In Vue

If you still having an issue or any question then please tell me via comment. Don’t be too selfish, please like, share, comment and subscribe.
Thanks for reading this post 🙂

2 thoughts on “Best Way to Resize Google reCAPTCHA”

Leave a Comment

*

code