How to get the recaptcha box to fit in portrait in webflow

I am trying to designer form with a recapture box, but I am having trouble with the Recaptcha

Box in portrait. Can someone help, please.

Here is my site Read-Only: [LINK][1]
([https://preview.webflow.com/preview/eaglewingsinternationalacademy?utm_medium=preview_link&utm_source=designer&utm_content=eaglewingsinternationalacademy&preview=cb540ff4705686793769868d7ac6bfc3&pageId=5e63e8ab98761cac652b8c84&mode=preview][2])

[1]: Also here is the web link: https://eaglewingsinternationalacademy.webflow.io/parents-corner

Hi @shaqueal,

You need a custom media query.

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

You may have to play a little bit with the transform origin in order to center the recaptcha, there’s a value that centers it but I can’t remember it. sorry.

Hi, @ColibriMedia I will try it Thank you.

1 Like

A simpler way to do it is to push this into another div. You can scale it down by changing parent div using transform properties.

Drawback: It would leave a ghost that will mess with your layout a little.