Responsive no captcha reCaptcha

Really? 300px as a fixed with? I thought it was bad idea when I started to use no captcha reCaptcha. Decisions like that definitely leads to messy workarounds.
I found this snipped on Modern Magic website. From some point it hides reCaptcha logo, which is quite bad I would say, but I couldn’t come up with better solution, and this solves the problem for now. I really hope that Google will fix that and will allow some sort of flexibility for this widget.

Another solution proposed by Hieu Bui

If you come up with better solution, don’t hesitate to ping me, and I will update this article for sure.

  • Hieu Bui

    I found another solution. This is not the best yet, but acceptable, with a bit ugly (cause it is too small)

    @media screen and (max-height: 575px){
    #rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}

    We use css transform to make it responsive for mobile.

    • Aidas

      Hey,

      Thanks for update!

      Aidas