Responsive Recaptcha that fills parent's container

Question

I have a problem with making responsive recaptcha on my website.

With it's own width of 304 px it,s fine on pc and bigger smartphones but on a smaller screens it gets clipped.

I want Recaptcha to fill 100% of the parent container width on smaller devices.

I tried few ways that i found on the internet like:

1. Setting the inline style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"> - It only changes the recaptcha size to 0.77 of it's origin. I thought it will be something like 0.77 of the parent's width and that's what I'm looking for.

2. I tried to add some javascript and change the recaptcha size depending on screen size but that didn't work either.

On this site i found a contact-form with recaptcha that works extacly like I want it to... : https://gpointonltd.co.uk/contact-us/

This is my html:

<div class="contact-form">
                <form action="contact.php" method="POST">
                    <h1 class="lang" key="contact-form" style="margin: 0 auto; font-size: 22px; font-family: Open Sans; color: #ff4800; margin-bottom: 10px; padding-bottom: 4px; font-weight: 100; width: 100%; text-align: center;">Formularz kontaktowy</h1>

                    <label class="lang" key="contact-form-name" for="name">Imię</label>
                    <input id="name" class="contact-form-content" type="text" name="name" required>
                    
                    <label class="lang" key="contact-form-email" for="email">E-mail</label>
                    <input id="email" class="contact-form-content" type="email" name="email" required>
                    
                    <label class="lang" key="contact-form-topic" for="topic">Temat</label>
                    <input id="topic" class="contact-form-content" type="text" name="topic" required>
                    
                    <label class="lang" key="contact-form-text" for="message">Dodatkowe informacje</label>
                    <textarea id="message" name="message" style="line-height:16px; font-size: 14px; font-family: calibri;" class="contact-form-content" cols="" rows="10"></textarea>

                    <div class="g-recaptcha" data-theme="light" data-sitekey="xyz" data-size="normal" ></div>
                    
                    <button class="contact-form-content-submit" name="submit" type="submit"><p class="lang" key="contact-form-send" style="margin: 0; padding: 0;">Wyślij</p><img id ="Contact_icon_white" src="img/Contact_icon_white.png" alt="White contact icon"></button>  
                </form>

                <div class="contact-form-callnow" style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <p class="lang" key="callnow" id="contact-form-callnow" style="font-family: Open Sans; margin: 0; padding: 14px 0px 4px 0px;">Zadzwoń teraz i umów przeprowadzkę!</p>
                </div>
                <div style="display: flex; align-items: center; justify-content: center; margin: 0; padding: 0;">
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><img src="img/Phone_icon_green.png" alt="Phone icon" style="height: 28px; padding-right: 10px"></a>
                    <a style="margin: 0; padding: 0;" href="tel:+48732739751"><p style="font-family: Open Sans; margin: 0; padding: 4px 0px 10px 0px; font-size: 20px;">732 739 751</p></a>
                </div>
            </div>
        </div>

I got no css to .g-recaptcha at the moment.

This is the website i'm working with: https://www.poznanprzeprowadzki.pl

If you have any additional questions, I am free! :)

Answer 1

Try using CSS and Javascript:

CSS

.g-recaptcha {
 transform-origin: left top;
 -webkit-transform-origin: left top;
}

Javascript (captchaScale = containerWidth / elementWidth) Uses throttle.js, needs to be imported (https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js)

    function scaleCaptcha(elementWidth) {
      // Width of the reCAPTCHA element, in pixels
      var reCaptchaWidth = 304;
      // Get the containing element's width
        var containerWidth = $('.contact-form').width();
      
      // Only scale the reCAPTCHA if it won't fit
      // inside the container
      if(reCaptchaWidth > containerWidth) {
        // Calculate the scale
        var captchaScale = containerWidth / reCaptchaWidth;
        // Apply the transformation
        $('.g-recaptcha').css({
          'transform':'scale('+captchaScale+')'
        });
      }
    }
    
    $(function() { 
     
      // Initialize scaling
      scaleCaptcha();
      
      // Update scaling on window resize
      // Uses jQuery throttle plugin to limit strain on the browser
      $(window).resize( $.throttle( 100, scaleCaptcha ) );
      
    });

This code must be under throttle.js