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:
- How to Select Data Between Two Dates in MySQL
- Error After php artisan config:cache In Laravel
- Specified Key Was Too Long Error In Laravel
- AJAX PHP Post Request With Example
- How To Use The Laravel Soft Delete
- How To Add Laravel Next Prev Pagination
- cURL error 60: SSL certificate problem: unable to get local issuer certificate
- Difference Between Factory And Seeders In Laravel
- Laravel: Increase Quantity If Product Already Exists In Cart
- How To Calculate Age From Birthdate
- How to Convert Base64 to Image in PHP
- Check If A String Contains A Specific Word In PHP
- Dynamically Populate A Select Field’s Choices In ACF
- How To Find Duplicate Records in Database
- Difference between del, remove and pop on lists
- How To Solve NPM Start Script Missing Error
- How To Declare A Global Variable in Vue
- 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 🙂
How to resize the Image Select option
Hi Saurabh Sharma, Would you please eloborate your issue so that we help you?
Sino a quando la nostra agenzia SEO seguirà il vostro progetto lo
farà in modo unico concentrandosi posizionamento su google maps di esso e sui risultati da ottenere.
Helpful