Mobile Site - side to side slop - with reCAPTCHA

I am having the same trouble with Google reCAPTCHA breaking the page on a MOBILE device. All of my comments are pertaining to the mobile version of the website.

For some reason reCAPTCHA is NOT breaking:

http://wwel.org/contact-us/

Nor is it breaking:

http://es.wwel.org/contactenos/

BUT reCAPTCHA is breaking:

http://pt.wwel.org/contate-nos/

All three pages are built IDENTICALLY. But you can see in the three attachments, that the pt.WWEL site Contact Page is BROKEN. It has ‘play’ side to side. Or side to side slop. With your finger you can wobble the page - side to side.

No other pages on the website suffer this. Also,

How can I eliminate this side to side WOBBLE? Slop? Looseness…

I was provided code previously to remedy this. Here is the code I was provided:

@media (max-width: 370px) {
#content .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
padding: 0;
}
}

It works, but it also eliminates all the margins / padded areas on the mobile version on every page of the site. I will upload a screenshot with the proper margins and one with that CSS code and NO OTHER changes so you can see how all margins/padding is eliminated making it hard to read on a mobile device.

It seems it would be best to add code only to that page/section, etc. to remedy this and not a site-wide CSS line that effects every page just to fix a problem that occurs one time on one page - wherever the reCAPTCHA is used…

Can you help me?

Hello there,

AFAIK we don’t have control to style reCAPTCHA width because it has its own style definition. There’s no way to override it, I am afraid. In short, it isn’t really an issue with the theme.

Regards,
Kharis

But I can list countless websites that use reCAPTCHA without breaking the page. Here are a couple: GuideTrekker.com - JBCustomMold.com

Now using the Sydney Pro theme - Look at LawsonCRE.com

Just one page. I had to put the Contact Form - in the footer widget area. That worked to contain the reCAPTCHA. The page isn’t broken. No side to side wobble.

So it can be done. We just have to figure out how.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

html,
body {
   overflow-x: hidden;
}

Regards,
Kharis

It works, Kharis! Thank you again!

Again, all of the following statements are pertaining to the mobile
version of the websites…

This line of code also fixes another issue with side to side slop. An
issue I was willing to tolerate. If you look on:

http://pt.wwel.org/sustentabilidade/

You will notice that at no point is there side to side ‘play’
(looseness) - slop. That is because I have installed your code on this
site.

But for the sake of development and improvement of the theme, I have not
yet installed this on the two other versions of the website. If you
look at:

http://wwel.org/sustainability/

or

http://es.wwel.org/sostenibilidad/

You can see that while the animation is happening for the two graphics
in the second column, the page is broken. In other words - while those
graphics are “fading in left” and “fading in right” the page has the
side to side ‘play’ slop. And it really shouldn’t.

I suggest that custom code should NOT be necessary to contain this. It
should be part of the theme itself. This is the very first time as a
website maker that I have ever experienced the reCAPTCHA breaking a
webpage and having to fix it.

So I greatly appreciate the help and the code, but this should be
included in the next theme update, and hence forth not be an issue.
Especially the Sydney Pro version.

Thanks again.

Dan Marshall

Hello Dan,

I agree with you, we’ll add the code into main theme’s style.css in the future update.

html,
body {
   overflow-x: hidden;
}

Sorry for the inconvenience.

Regards,
Kharis

It is no inconvenience. I really like the theme. With continued upgrades it can be a valid and worthy theme for a long time.