Member Avatar for <M/>

I am using this snippet of code:

#recaptcha_image,  
#recaptcha_image img   
{  
    width: 200px !important;  
    cursor: pointer;  
}  
#recaptcha_image img:hover  
{  
    position: absolute;  
    width: 300px !important;  
}  
.recaptcha_only_if_image,  
.recaptcha_only_if_audio  
{  
    display: block;  
}

And no matter what I do I can not shrink the overall size of the recaptcha but I can increase its width. What do I do to make the overall size smaller? I am sorry if I have repeated this question but it was never really answered so I am, in a way, re-wording it...

Thanks.

  • 2 Contributors
  • 3 Replies
  • 83 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

is running up against how the reCAPTCHA widget is delivered. The widget UI is provided by Google's script and is loaded in its own browsing context, so parent-page CSS cannot reliably change the internal layout or its minimum dimensions. That explains why overriding the image width from your page does not reduce the overall widget size (and why simply changing the <img> tag on your page won't help). See the HTML iframe behavior for the underlying reason: iframe element.

The supported fix is to use the official size options rather than trying to style internals. If you migrate to reCAPTCHA v2 you can use the compact widget with the data-size="compact" option. Example usage:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="your_site_key" data-size="compact"></div>

Refer to the official docs for details: reCAPTCHA display documentation.

If you cannot change API versions, there is an unsupported workaround: scale the whole widget container with CSS transforms (for example, transform: scale(0.8); transform-origin: 0 0;). This visually reduces the widget but also reduces click targets, can hurt accessibility, and is not an official solution — use it only as a last resort and test thoroughly across devices. For long-term reliability, upgrade to a supported reCAPTCHA version or pick a captcha that offers a responsive/smaller embed.

Recommended Answers

All 3 Replies

Member Avatar for <M/>

The snippet of code is the code I found, but when I change the width, it doesn't do anything.

Please don't tell me that it doesn't work because it says 200px already.

Member Avatar for <M/>

I know how to adjust the image size... i just don't know how to adjust the recaptcha to be smaller than 200px.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.