Google reCAPTCHA responsiveness

Knowledge Solutions
, , , , ,
1

Problem statement

We set up the Google reCAPTCHA v2 in the Bot Detection. But the captcha element doesn’t fit completely into screens smaller than 387px. It also leaves a gap to the right on screens smaller than 500px and larger than 390px.

Solution

We have a backlog item to track this issue. Meantime, you can inject the custom CSS as a workaround.

@media screen and (max-width: 500px) {
    .ulp-recaptcha-container {
         border:0!important;
    }
     .ulp-recaptcha {
         padding-top: 1px!important;
         transform: scale(1)!important;
         margin:0!important;
    }
     .ulp-recaptcha > div {
         width: 302px!important;
         height: 78px!important;
         overflow: hidden!important;
         margin: 0 auto!important;
    }
     ._widget-auto-layout div:has(> ._form-login-id) {
         padding-left:5px!important;
         padding-right:5px!important 
    }
     .ulp-alternate-action {
         text-align:center;
    }
}