reCAPTCHA Size for Mobile

Hello,

I have a reCAPTCHA in my project. As it seems, you can not scale this or set any size. And it now looks like the Galaxy S5, for example, that it is too big and looks out. I have seen that there is a possibility with an attribute, but then it is synonymous s.PC small. How can I make it so that it is great on the PC and small on the phone.

Link to my project is below and you can find it in the contact area.

Thank you!

Kind regards


Here is my site Read-Only: LINK

2 Likes

Here is the fix (watch the video below to see how to use the code snippet):

<style>
@media screen and (max-width: 575px){
  .g-recaptcha {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
  }
}
</style>

https://www.loom.com/share/6a54c99ef17344cab0527ff65d0183c7

2 Likes

That video went missing, but this one covers it (watch last segment.) Basically add a div block, put recpatcha in it and use transform effect to size down recaptcha…

1 Like

Hi there, I have a similar problem.

I am currently doing the 21-day portfolio course and struggling to get the reCaptcha responsive on the mobile portrait viewport. After placing the reCaptcha in a

, I could rescale it, but the responsiveness still acts on the previous size of the reCaptcha. I have no fixed widths applied and my setting all look identical to those in the video. Do you have any advice?

I have tried playing around with the positioning and I can fix it, but I’m afraid this might not be the best practice and could create issues in the future.

https://preview.webflow.com/preview/francoiss-portfolio-site?utm_medium=preview_link&utm_source=designer&utm_content=francoiss-portfolio-site&preview=5897c4c4c3a68e61eabf5f60492cfec9&pageId=64a54bcbfe52d431ff73f9d4&workflow=preview