How to change the size of Recaptcha in Contact form 7: Icon Stack

Support
#1

Hi!

I added recaptcha to the contact form 7. I want to know what custom CSS can change its size so that it matches the width of the contact form, but is also responsive on mobile devices. My website is https://www.keianienterprises.com The code below represents the recaptha.

Blockquote
.rc-anchor rc-anchor-normal rc-anchor-darkrc-anchor rc-anchor-normal rc-anchor-dark

This is the height of the elements within the contact form 7

Blockquote
595.5 x 34.44

#2

Hi,

I am sorry but that is not possible as recaptcha uses iframe.

An iframe is a ‘hole’ in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page. As others have stated, your options are: give the file that is being loaded in the iframe the necessary CSS.

Thanks

#3

Hi, Paul!

The css to scale it is placed below. Is it possible to add width to the css which will increase the width of the iframe automatically and also make it mobile responsive?

Blockquote
.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}

#4

Hi,

Any elements inside the iframe will not be affected by any css code that is added in xtheme.

Unless you can edit the css from the iframe page then it will work.

You can try adding `width:100%;

.g-recaptcha {
     width:100%;
     transform:scale(0.77);
     transform-origin:0 0;
}
#5

Hi, Paul!

Thanks. but unfortunately, the width code didn’t do the trick. Unless I can figure it out I’ll probably leave it as is. I’m not sure how to adjust tye actual Iframe itself.

#6

Hi there,

I think it is not possible to do so as the content inside the iFrame is loaded from another source which you do not have control over.

Think of the iFrame as a window which contains a static content without the control to change it. Even if you manage to make the iFrame responsive the content inside will not be. So the window will shrink but it will obscure the content inside.

This is the nature of the iFrame in web and not related to what theme you would use. I did a Google Search regarding this which will give you a better idea of the case.

Thank you for your understanding.

1 Like