DEV Community

Cover image for How to make the Google reCAPTCHA responsive?
Shiva Aryal
Shiva Aryal

Posted on

20 5 4 5 5

How to make the Google reCAPTCHA responsive?

Google reCAPTCHA is a popular tool used by websites to prevent spam and abuse by bots. Making it responsive means ensuring that it works seamlessly on all devices, including mobile devices with smaller screens. By using the CSS transform property you can achieve changing the width by changing the entire scale of the reCAPTCHA. By adding in just two inline styles, you can make the reCAPTCHA fit nicely on your mobile device. You can make the captcha responsive by simply adding below code to your global CSS:

<style>
@media only screen and (max-width: 500px) {
    .g-recaptcha {
        transform:scale(0.77);
        transform-origin:0 0;
    }
}
</style>
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
maprangsoft profile image
Maprangsoft

thank you.

Collapse
 
smrpdl1991 profile image
smrpdl1991

nice ..

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay