Google’s reCAPTCHA can easily overflow it’s parent at small screen sizes. Let’s fix that.

Since the reCAPTCHA sits inside an iframe, we can’t target its individual elements with CSS. We can limit the iframe’s width, but that simply hides any part of the iframe that doesn’t fit within our new width.

The code below reduces the scale of the entire iframe, including its contents.

@media (max-width: 600px) {
	iframe[src*="google.com/recaptcha/"] {
		transform: scale(0.85);
		transform-origin: 0 0;
	}
}

Since this affects the text inside the iframe as well, we don’t want to scale it down unless we have to. In the code above, we’re using a media query to only scale the iframe if the screen width is 600px or less. We also don’t want to go overboard with the scale, so we’re just scaling it to 85% above.

For a more information on how this works, check out this explanation from the Geek Goddess. I’ve taken the code from that post andremoved the vendor specific prefixes that are no longer needed. I also modified the CSS so that it targets the reCAPTCA iframe directly without the need to modify the iframe code or provide a wrapping element.