CODEWITHSUNDEEP
cssreactjsrecaptcha
Mat
Mat

Reputation: 129

How to make react-google-recaptcha responsive

I'm using the react-google-recaptcha package and to make it fit in every screen the only except screens with a width smaller than 347px. I don't know what can i do to make it fit inside the screen because it is an iframe.

Here is how it looks in a 350px screen:

enter image description here

And here it's how it looks in a 320px screen overflowing:

enter image description here

Jsx:

 <div className="captcha">
        <ReCAPTCHA
          sitekey="*********"
          onChange={handleCaptcha}
          theme="dark"
        />
      </div>

Css:

.captcha {
    margin: 0 auto;
    width: 65%;
    margin-bottom: 1rem;
}

@media screen and (max-width: 480px) {
    .captcha {
        width: 70%;
    }
}

@media screen and (max-width: 425px) {
    .captcha {
        width: 80%;
    }
}

@media screen and (max-width: 375px) {
    .captcha {
        width: 93%;
    }
}

@media screen and (max-width: 375px) {
    .captcha {
        width: 100%;
        float: left;
    }
}

Upvotes: 0

Views: 6321

Answers (1)

Marta C
Marta C

Reputation: 96

What worked for me was to add an inline style to the wrapper of the reCaptcha:

 <div className="captcha" style={{transform:"scale(0.85)", transformOrigin:"0 0"}}>
    <ReCAPTCHA
      sitekey="*********"
      onChange={handleCaptcha}
      theme="dark"
    />
  </div>

Upvotes: 5

Related Questions